扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了css中如何使用transform属性，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联主营濂溪网站建设的网络公司,主营网站建设方案,APP应用开发,濂溪h5小程序设计搭建,濂溪网站营销推广欢迎濂溪等地区企业咨询
CSS3transform属性
作用：transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法：
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转换元素定义透视视图。
注：InternetExplorer10、Firefox、Opera支持transform属性。InternetExplorer9支持替代的-ms-transform属性（仅适用于2D转换）。Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）。Opera只支持2D转换。
CSS3transform属性的使用示例
rotate(45deg)
rotateX(45deg)
rotateY(45deg)
rotateZ(45deg)
scale(2)
scaleX(2)
scaleY(2)
skew(45deg,45deg)
skewX(45deg)
skewY(45deg)
translate(45px)
translateX(45px)
translateY(45px)
matrix(2,2,0,2,45,0)
感谢你能够认真阅读完这篇文章，希望小编分享的“css中如何使用transform属性”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网