最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

css3的transform如何正确使用?

CSS&HTML AZ 1448浏览 0评论

Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体是如何实现的呢?下面我们带着这疑问从transform的语法开始入手学习吧。

先看下简单demo:

transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(120px, 50%);
transform: scale(2, 0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: scale(0.5) translate(-100%, -100%);

如果属性具有不同于none的值,则将创建一个堆栈上下文。在这种情况下,对象将充当位置的包含块:它包含(position: fixed)固定元素。

语法:

none | <transform-list>
where
<transform-list> = <transform-function>+

where
<transform-function> = [ <matrix()> || <translate()> || <translateX()> || <translateY()> || <scale()> || <scaleX()> || <scaleY()> || <rotate()> || <skew()> || <skewX()> || <skewY()> || <matrix3d()> || <translate3d()> || <translateZ()> || <scale3d()> || <scaleZ()> || <rotate3d()> || <rotateX()> || <rotateY()> || <rotateZ()> || <perspective()> ]+

where
<matrix()> = matrix( <number> [, <number> ]{5,5} )
<translate()> = translate( <length-percentage> [, <length-percentage> ]? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> [, <number> ]? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( <angle> )
<skew()> = skew( <angle> [, <angle> ]? )
<skewX()> = skewX( <angle> )
<skewY()> = skewY( <angle> )
<matrix3d()> = matrix3d( <number> [, <number> ]{15,15} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
<rotateX()> = rotateX( <angle> )
<rotateY()> = rotateY( <angle> )
<rotateZ()> = rotateZ( <angle> )
<perspective()> = perspective( <length> )

where
<length-percentage> = <length> | <percentage>

 

浏览器支持度

Desktop:

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 36

Yes -webkit-

Yes -webkit- 16

49 -webkit-

44 -webkit- 2

103

11 -webkit-

9 -ms- 4

12.1

15 -webkit-

10.5 — 15 -o-

9

3.1 -webkit-

3D support 12 Yes 10 105 15 4

Mobile

Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support 2.1 -webkit- 1 Yes -webkit- Yes -webkit- 16

49 -webkit-

44 -webkit- 2

11.5 -webkit- 9

3.2 -webkit-

?
3D support 3 -webkit- Yes Yes Yes 22 3.2 ?

转载请注明:TUTERM.COM » css3的transform如何正确使用?

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!