定义和用法

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. jQuery on()绑定动态元素出现的问题小结

    jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友 ...

  2. 遍历INI文件和删除指定域内容

    主要还是使用的INI文件操作的API,只是把参数修改下. BOOL WINAPI WritePrivateProfileString( __in LPCTSTR lpAppName, __in LPC ...

  3. 图像的影像地图超链接，<map>标签浅谈

    在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源.这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接.这就是影像地图.要完成地图区域超链接要用到三种标 ...

  4. 四种方案解决ScrollView嵌套ListView问题[转]

    http://bbs.anzhuo.cn/thread-982250-1-1.html 以下文章转自@安卓泡面 在工作中,曾多次碰到ScrollView嵌套ListView的问题,网上的解决方法有很多 ...

  5. ios AFNetworking 有用篇

    在寻常开发中,af是个非常好用的东西.非常喜欢.可是网上的af找了好多都不太全面,不有用.所以我今天做了一个demo.有上传下载的. 比較有用.希望大家可以用到. 去我github下载demo git ...

  6. 搭建HWI(HiveWebInterface)步骤总结

    众所周知,Hive有三种使用方式:CLI.HWI浏览器.Thrift客户端.安装配置完Hive后无需进行额外操作即可使用CLI.但是HWI则需要单独搭建.本文主要记录我自己搭建HWI的过程. 说明:本 ...

  7. RDF Database和NoSql DB

    一篇比较老的文章,介绍了RDF Database和其他一些分类的NoSql DB http://blog.datagraph.org/2010/04/rdf-nosql-diff

  8. Android UI WebView的使用：

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

  9. 使用多线程完成Socket

    public class Service { //服务器 public static void main(String[] args) { ServerSocket serverSocket=null ...

  10. c# 语句关键字

    1. yield 它表明一个方法,操作符或者get选择器里会出现迭代. 用yield return 同时返回每一个元素,  返回类型必须是IEnumerable, IEnumerable<T&g ...