CSS 3 transform 属性

CSS transform* 属性应用于元素的 2D 或 3D 转换

这个属性可以将元素旋转,缩放,移动,倾斜等

为了更好地理解 transform 属性,请 查看范例

默认值: none
继承: no
版本: CSS3
JavaScript 语法: object.style.transform="rotate(7deg)"

语法

transform: none| *transform-functions* ;

值说明

描述
none 定义不进行转换
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵
translate(x,y) 定义 2D 转换
translate3d(x,y,z) 定义 3D 转换
translateX(x) 定义转换,只是用 X 轴的值
translateY(y) 定义转换,只是用 Y 轴的值
translateZ(z) 定义 3D 转换,只是用 Z 轴的值
scale(x[,y]?) 定义 2D 缩放转换
scale3d(x,y,z) 定义 3D 缩放转换
scaleX(x) 通过设置 X 轴的值来定义缩放转换
scaleY(y) 通过设置 Y 轴的值来定义缩放转换
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换
rotate(angle) 定义 2D 旋转,在参数中规定角度
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换
perspective(n) 为 3D 转换元素定义透视视图

浏览器支持

下表中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

 /
2D 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
10.5 -o-
3D 36.0
12.0 -webkit-
12.0 10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-

范例

旋转 div 元素

div
{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
}

运行范例 »

更多范例

  1. 旋转图片

    演示了如何创建 "polaroid" 照片和旋转图片

CSS 参考手册

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.