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- |
103
11 -webkit- |
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- |
11.5 -webkit- | 9
3.2 -webkit- |
? |
3D support | 3 -webkit- | Yes | Yes | Yes | 22 | 3.2 | ? |
转载请注明:TUTERM.COM » css3的transform如何正确使用?