定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

实例

旋转 div 元素：

<!DOCTYPE html>

<html>

<head>

<style>

div

{

margin:30px;

width:200px;

height:100px;

background-color:yellow;

/* Rotate div */

transform:rotate(9deg);

-ms-transform:rotate(9deg); /* Internet Explorer */

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

-webkit-transform:rotate(9deg); /* Safari 和 Chrome */

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

}

</style>

</head>

<body>

<div>Hello World</div>

</body>

</html>

效果

tips:

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

　　

css属性之transform的更多相关文章

  1. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  2. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  3. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

  4. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

  5. css3属性 transition transform

    1.transition 译:过渡,转变 可以设置过渡属性 transition: property duration timing-function delay; transition-proper ...

  6. 判断浏览器是否支持某个css属性

    方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...

  7. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  8. Transition 所支持的css属性

    transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: color: 通过红.绿.蓝和透明度组件变换(每个数值处理)如:back ...

  9. 值得注意的CSS属性

    文本TEXT letter-spacing 字符间距 word-spacing 字间距 line-height 行高 text-decoration 修饰(下划线) text-indent 首行缩进 ...

随机推荐

  1. 在终端(Terminal)里用命令行进行数学运算

    有时候我们进行一些数学运算,我们会去开系统自带的计算来做这件事情,其实我们也可以直接在终端里面用命令行进行的. 在命令行里敲 bc 进入数学计算模式,然后随便输入数学表达式 回车 ,结果就出来了,是不 ...

  2. 安装LVS安装LVS和配置LVS的工作比较繁杂

    安装LVS安装LVS和配置LVS的工作比较繁杂,读者在配置的过程中需要非常细心和耐心.在本节我们将对其进行详细地介绍.主要包括如下几个核心步骤:1．获取支持LVS的内核源代码如果读者需要使用LVS,需 ...

  3. git查看某个文件的修改历史

    <转自 http://www.cnblogs.com/flyme/archive/2011/11/28/2265899.html> 有时候在比对代码时,看到某些改动,但不清楚这个改动的作者 ...

  4. poj 1964 Cow Cycling（dp）

    /* 一开始想的二维的 只维护第几只牛还有圈数 后来发现每只牛的能量是跟随每个状态的 所以再加一维 f[i][j][k]表示第i只牛 领跑的j全 已经消耗了k体力 转移的话分两类 1.换一只牛领跑 那 ...

  5. Remoting 的“传递的引用”理解

    WCf是集大成者,具有其他微软的很多技术,其中分布式上很多借助于Remoting,所以研究一下Remoting有助于理解WCF 提到Remoting就不得不涉及到MarshalByRefObject这 ...

  6. state模式理解

    state模式应用场景 条件判断很多的情况 比如有很多if else语句:switch case语句等等. 如果以后业务越来越复杂,条件判断有100多个,每种条件的处理逻辑很复杂,不止一个业务逻辑会重 ...

  7. 【转】深入理解Java内存模型（六）——final

    与前面介绍的锁和volatile相比较,对final域的读和写更像是普通的变量访问.对于final域,编译器和处理器要遵守两个重排序规则: 在构造函数内对一个final域的写入,与随后把这个被构造对象 ...

  8. UITableViewCell实现3D缩放动画

    gif效果图: 代码部分: import UIKit class TableViewController: UITableViewController { override func viewDidL ...

  9. Android中的动画

    Android中的动画分为: 1.逐帧动画(Frame Animation):  把动画过程的每张静态图片都收集起来,然后由Android来控制依次显示这些静态图片,然后利用人眼”视觉暂留“的原理,给 ...

  10. IE6-BUG-CSS兼容详解

    1.IE6背景闪烁 如果你给链接.按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象.造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可 ...