css transform属性


  翻译结果：

transform

英 [trænsˈfɔ:m]   美 [trænsˈfɔ:rm]  

vt.变换;改变;改观

vi.改变

n.[数]变换式

css transform属性语法

作用：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。为了更好地理解 transform 属性，请查看这个演示。

语法：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 转换元素定义透视视图。    

注释：Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。

css transform属性示例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

热门推荐

首页

视频

问答

提交