<!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. pytest_01_安装和入门

    目录 pytest 安装与入门 1.pip install -U pytest 2.创建一个test01.py的文件 3.在该目录下执行pytest(venv) 4.执行多个,新建一个py文件 tes ...

  2. AES解密后多了\0

    AES加密解密之后发现多了几个空格,不知道原因.在调试时发现多了\0这种东西 不知道为什么会多这些.后来.replace("\0","")这样做了事

  3. luogu5008 逛庭院 (tarjan缩点)

    首先如果这是一个DAG,我按照拓扑序倒着去选,一定能选到所有入度不为0的点 然后考虑有环的情况 我们拎出来一个强连通分量 先假设它缩点以后是没有入度的 那我最后它里面一定至少剩一个不能选 因为就剩一个 ...

  4. extern C小结

    名词解释 1.extern extern翻译为外部的,用在变量或函数之前,使其可见范围拓宽,这就是为啥叫extern吧.那它是用来干嘛的呢?当用在变量或函数之前,提示编译器到其他模块寻找其定义. 举个 ...

  5. CSS之2D转换模块

    CSS 2D转换模块 transform 参考W3手册 transform 属性向元素应用从2D 或3D转换.该属性允许我们对元素进行旋转.缩放.移动或者倾斜. 格式: transform: none ...

  6. dbForge Studio for MySQL V8.0 Enterprise

    上篇文章:JetBrains全家桶破解思路(最新更新:2018-12-24) 最适合从SQLServer转向MySQL的人使用(用起来基本上差不多) 最适合Net开发人员的MySQL IDE (不装V ...

  7. P1966 火柴排队

    这道题需要小小的思考一波 (然而我思考了两节课) 好,我们先得出一个结论:a中第k大的与b中第k大的一定要排在一起,才能保证最小. 然后发现:挪a,b其实没有区别,故我们固定a,挪b. 然后我们就思考 ...

  8. A1114. Family Property

    This time, you are supposed to help us collect the data for family-owned property. Given each person ...

  9. fcntl F_GETFL

    F_GETFL 我的理解是file get flag #include <stdio.h>#include <fcntl.h>#include <unistd.h> ...

  10. 第八节，配置分布式TensorFlow

    由于随着神经网络层数的增多,需要训练的参数也会增多,随之而来需要的数据集就会很大,这样会造成需要更大的运算资源,而且还要消耗很长的运算时间.TensorFlow提供了一个可以分布式部署的模式,将一个训 ...