<!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. 「TJOI2015」组合数学 解题报告

    「TJOI2015」组合数学 这不是个贪心吗? 怎么都最小链覆盖=最大点独立集去了 注意到一个点出度最多只有2,可以贪心一下出度的去向 按读入顺序处理就可以,维护一个\(res_i\)数组,表示上一行 ...

  2. Mysql 允许远程连接

    授权的方式允许任何主机访问mysql服务器: mysql>GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'password' W ...

  3. User Agent 用户代理

    User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎.浏览器语言.浏览器插件等. User A ...

  4. LINQ的基础使用方法

    //新建一个项目 //项目下新建一个App_Code文件夹 //在文件夹内添加一个LINQ TO SQL,这个操作就相当于创建了一个实体类 //连接数据库后把表拖入到服务器资源管理器中 //创建数据访 ...

  5. LOJ#2353 货币兑换

    CDQ分治优化斜率优化DP. 有个结论就是每天买完卖完....知道这个之后考虑今天卖的是哪天买的就能写出n²DP了. 发现形式是fi = max(aibj + cidj)的形式.我们可以把ci除出来, ...

  6. 【CH6803】导弹防御塔

    题目大意:给定 N 座塔,M 个怪物,每座塔一次可以发射一枚导弹,发射导弹有发射时间和冷却时间,每座塔和每只怪物有自己的二维坐标,所有导弹有一个共同的速度,求至少需要多长时间才能将所有怪物消灭. 题解 ...

  7. （五）Oracle 的 oracle 表查询

    http://www.hechaku.com/Oracle/oracle_tables_chack.html 通过scott用户下的表来演示如何使用select语句,接下来对emp.dept.salg ...

  8. 【译】4. Java反射——字段

    原文地址:http://tutorials.jenkov.com/java-reflection/fields.html ======================================= ...

  9. Counted（内存管理机制）

    class Counted { private: unsigned int count_; public: Counted() : count_() { } virtual ~Counted() { ...

  10. Springboot+WebSocket+Kafka（写着玩的）

    闹着玩的来源:前台发送消息,后台接受处理发给kafka,kafka消费者接到消息传给前台显示.联想到websocket. 最终效果如图: 页面解释: 不填写内容的话,表单值默认为Topic.Greet ...