<!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. 【BZOJ2940】条纹（博弈论）

    [BZOJ2940]条纹(博弈论) 题面 BZOJ 神TM权限题. 题解 我们把题目看成取石子的话,题目就变成了这样: 有一堆\(m\)个石头,每次可以取走\(c,z,n\)个,每次取完之后可以把当前 ...

  2. 工作队列.py

    #对列模式图Work Queue背后的主要思想是避免立即执行资源密集型任务的时,需要等待其他任务完成.所以我们把任务安排的晚一些,我们封装一个任务到消息中并把它发送到队列,一个进程运行在后端发送并最终 ...

  3. LOJ#6285. 数列分块入门 9

    有点难..... 要求区间众数,所以我可以先把区间分块,然后我预处理出从第 i 块到第 j 块的众数,用dp[i][j]记录下来. 因为需要知道众数的num值, 所以我可以用一个vector来保存每个 ...

  4. Cannot set property 'innerHTML' of null

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 看如下错误代码: 知道是加载的问题就好解决了

  5. 洛谷P5111 zhtobu3232的线段树

    题意:给定线段树,上面若干个节点坏了,求能表示出多少区间. 区间能被表示出当且仅当拆出来的log个节点都是好的. 解:每个区间在最浅的节点处计算答案. 对于每个节点维护从左边过来能有多少区间,从右边过 ...

  6. 收藏：win32 控件之 sysLink控件（超链接）

    来源:https://blog.csdn.net/dai_jing/article/details/8683487 手动创建syslink(msdn): CreateWindowEx(, WC_LIN ...

  7. Ubuntu寻找某某库

    感觉这个方法很有用,记录一下 ubuntu14.04的error while loading shared libraries: libz.so.1问题 我们怎么这知道 libz.so.1在哪个包? ...

  8. 你真的知道什么是【共享Session】，什么是【单点登录】吗？

    一直有人问,为什么我实现的共享session不能单点登录,今天我也抽时间准备好好说一下. 我要喷(别喷我) 首先,网上水货文章很多,CSDN居多.CSDN转载率很高,也就是说同相同文章有很多,换汤不换 ...

  9. hdu 3613"Best Reward"(Manacher算法)

    传送门 题意: 国王为了犒劳立下战功的大将军Li,决定奖给Li一串项链,这个项链一共包含26中珠子"a~z",每种珠子都有 相应的价值(-100~100),当某个项链可以构成回文时 ...

  10. 利用sys打印进度条

    在很多常见中,需要对当前处理的进度进行显示,这个时候就需要进度条了,在python中,也有封装好的进度条模块,当然,也可以自己编写一个简单的进度条来帮助理解进度条的实现. 首先,需要理解一个概念,就是 ...