<!DOCTYPE html>

<html>

<head>

<style>

#div1

{

position: relative;

height: 200px;

width: 200px;

margin: 100px;

padding:10px;

border: 1px solid black;

}

#div2

{

padding:50px;

position: absolute;

border: 1px solid black;

background-color: yellow;

transform: rotate(45deg);

transform-origin:20% 40%;

-ms-transform: rotate(45deg); /* IE 9 */

-ms-transform-origin:20% 40%; /* IE 9 */

-webkit-transform: rotate(45deg); /* Safari and Chrome */

-webkit-transform-origin:20% 40%; /* Safari and Chrome */

-moz-transform: rotate(45deg); /* Firefox */

-moz-transform-origin:20% 40%; /* Firefox */

-o-transform: rotate(45deg); /* Opera */

-o-transform-origin:20% 40%; /* Opera */

}

</style>

</head>

<body>

<div id="div1">

  <div id="div2">HELLO</div>

</div>

</body>

</html>

运行结果如下

HELLO

CSS3 transform-origin 属性的更多相关文章

  1. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  2. JavaScript 读取CSS3 transform

    某些场景需要读取 css3 transform的属性 例如 transform:translate(10px,10px) rotate(-45deg); 这该怎么读取呢,正则表达式?毫无疑问这很坑爹 ...

  3. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  4. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  5. CSS3 Transform、Transition和Animation属性总结

    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

  6. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

  7. CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变

    CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : tr ...

  8. css3的3d属性集合

    css3的3d属性集合 想进入css3的3d世界必须知道一下几个属性及其用法. 当然在进入属性介绍之前我想你必须知道3维坐标,附上一张经典图如下: 我想不用解释了吧.之后要平移和旋转都是在这个基础之上 ...

  9. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  10. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

随机推荐

  1. MVC使用记录

    如何获得MVC中,控制器和方法名字.这可以用于给当前选定菜单加个选定样式 获取控制器名称:(在View中写法) ViewContext.RouteData.Values["controlle ...

  2. ELK部署详解--elasticsearch

    #Elasticsearch 是一个实时的分布式搜索和分析引擎,它可以用于全文搜索,结构化搜索以及分析.它是一个建立在全文搜索引擎 Apache Lucene 基础上的搜索引擎,使用 Java 语言编 ...

  3. cf1000E We Need More Bosses (tarjan缩点+树的直径)

    题意:无向联通图,求一条最长的路径,路径长度定义为u到v必须经过的边的个数 如果把强联通分量都缩成一个点以后,每个点内部的边都是可替代的:而又因为这是个无向图,缩完点以后就是棵树,跑两遍dfs求直径即 ...

  4. Up-to-date cache with EclipseLink and Oracle

    Up-to-date cache with EclipseLink and Oracle One of the most useful feature provided by ORM librarie ...

  5. A1042. Shuffling Machine

    Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...

  6. 【洛谷P3455】ZAP-Queries

    题目大意:求 \[\sum\limits_{i=1}^a\sum\limits_{j=1}^b[gcd(i,j)=c]\] 题解:学会了狄利克雷卷积. \[\epsilon=\mu \ast 1\] ...

  7. appium 切换native/ webview，findby，还有页面元素定位一直小于0的问题的解决

    之前一直有个bug没有解决. 今天,终于解决了. 疑问过程: app是混合应用,项目做了H5优化之后,以前的用例执行总会失败,体现在原来的一个元素点击无反馈 排查原因:1.项目做了H5优化,2.测试的 ...

  8. 运用tp5上传图片，并生成缩略图

    最近想做个相册,需要用到上传图像,并且考虑到性能问题,还要生成缩略图,就学习下.在网上看了很多大神写的文章,经过各种调试总算出来了,分享下.不好之处,多多指教 ​ ​ ps:运用tp5图片类生成缩略图 ...

  9. python自动化开发-[第二十四天]-高性能相关与初识scrapy

    今日内容概要 1.高性能相关 2.scrapy初识 上节回顾: 1. Http协议 Http协议:GET / http1.1/r/n...../r/r/r/na=1 TCP协议:sendall(&qu ...

  10. flask SQLALchemy外键及约束

    from flask import Flask,session from flask_sqlalchemy import SQLAlchemy import config app = Flask(__ ...