首页 > 代码库 > css3变换效果详解

css3变换效果详解

2024-09-16 22:05:58   216人阅读

1.浏览器支持情况

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

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

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

Opera 只支持 2D 转换

2.transform属性

值描述测试
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 转换元素定义透视视图。 测试

3.指定元素变换的起点

transform-origin 属性允许我们指定应用变换的起点。默认状态以中心为起点，不过可以选择其他.如果只指定一个，另一个为center.

百分数  指定元素x轴或y轴的起点

长度值 指定距离

left center right 指定x轴上的距离

top center bottom 指定y轴上的距离

4.将变换作为动画和过渡处理

例

.class：hover{

transition-duration:1.5s;

transform:rotate(360deg)

}

css3变换效果详解


联系
我们