成都创新互联网站制作重庆分公司

css中如何使用transform属性

这篇文章主要介绍了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属性

感谢你能够认真阅读完这篇文章,希望小编分享的“css中如何使用transform属性”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前名称:css中如何使用transform属性
浏览路径:http://cxhlcq.com/article/podgsd.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部