如何使用transform属性
这篇文章主要介绍了如何使用transform属性,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
专注于为中小企业提供网站建设、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业青秀免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
transform属性用于向元素应用 2D 或 3D 转换;该属性允许我们对元素进行旋转、缩放、移动或倾斜。
CSS3 transform属性
作用: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 转换元素定义透视视图。
注:Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。Opera 只支持 2D 转换。
CSS3 transform属性的使用示例
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)
效果图:
感谢你能够认真阅读完这篇文章,希望小编分享如何使用transform属性内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
名称栏目:如何使用transform属性
文章转载:http://pwwzsj.com/article/ijoipe.html