定义和用法

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. maven项目 打可执行jar包

    1.pom添加 <build> <plugins> <plugin> <artifactId>maven-assembly-plugin</art ...

  2. 1st day

    学习配置环境,听的一脸懵逼,不过还好装好了,哈哈哈... <?php /*写一个函数,该函数可以将给定的任意个数的参数以指定的字符串串接起来成为一个长的字符串.该函数带2个或2个以上参数,其中第 ...

  3. EMV/PBOC解析(三) TLV格式解析(C#)

    1.什么是TLV格式? TLV即Tag-Length-Value,常在IC卡与POS终端设备中通过这样的一个应用通信协议进行数据交换. 金融系统中的TLV是BER-TLV编码的一个特例编码规范,而BE ...

  4. Android四大组件——Service

    Service相关链接 Service初涉 Service进阶 Service精通 Service是Android系统中的一种组件,它跟Activity的级别差不多,但是它不能自己运行,只能后台运行, ...

  5. HashSet与HashMap

    HashSet底层由HashMap实现 Hash表:存放链表表头的数组 HashSet的值存放于HashMap的key上,而HashMap的value统一为PRESENT(private static ...

  6. Android UI WebView的使用：

    Android UI WebView的使用: /** * @author smiling * @date 2016/10 */ 布局: <?xml version="1.0" ...

  7. 【转】iOS实时卡顿监控

    转自http://www.tanhao.me/code/151113.html/ 在移动设备上开发软件,性能一直是我们最为关心的话题之一,我们作为程序员除了需要努力提高代码质量之外,及时发现和监控软件 ...

  8. MySQL TEXT数据类型的最大长度

    TINYTEXT 256 bytes   TEXT 65,535 bytes ~64kb MEDIUMTEXT  16,777,215 bytes ~16MB LONGTEXT 4,294,967,2 ...

  9. JAVA泛型那些事儿

    本篇内容源于本人一个好友sgpro提供的java学习例子,现拿出来给大家分享. 此例子非常直观的通过代码讲解了java泛型的用法和好处,是笔者一直珍藏的最好的泛型学习笔记. 一.面向过程的时代 我们先 ...

  10. 安装VS2010后，如何设置老版本的项目文件不是默认用VS2010打开

    1.系统先后安装了VS2008和VS2010,在打开用VS2008创建的项目文件时总是会默认用VS2010打开,选择打开方式都不行,很不方便,差点要把VS2010卸载了.     其实只需要简单设置V ...