CSS變形與動畫

本文原載於簡書，作者_YM雨蒙（飢人谷學員），轉載已獲作者授權。

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

正文如下。

變形與動畫是css3中的知識,但是一直都掌握的不是很熟練,今天就把它徹底的過一遍。

變形

• CSS transform 屬性允許你修改CSS視覺格式模型的坐標空間。使用它，元素可以被轉換（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）。
• CSS transform 屬性 , 只對 block 級元素生效！

transform 語法

• transform:none | <transform-function> +
• 初始值為none
• fucntion可以為哪些值?
• 語法+表示可以寫多個

/* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);transform: translate(12px, 50%);transform: translateX(2em);transform: translateY(3in);transform: scale(2, 0.5);transform: scaleX(2);transform: scaleY(0.5);transform: rotate(0.5turn);transform: skew(30deg, 20deg);transform: skewX(30deg);transform: skewY(1.07rad);transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);transform: translate3d(12px, 50%, 3em);transform: translateZ(2px);transform: scale3d(2.5, 1.2, 0.3);transform: scaleZ(0.3);transform: rotate3d(1, 2.0, 3.0, 10deg);transform: rotateX(10deg);transform: rotateY(10deg);transform: rotateZ(10deg);transform: perspective(17px);

transform有很多值可以使用,我們看一下具體有那些值,該怎麼使用

• transform:rotate(<angle>)
• angle:角度

transform:rotate(45deg) //順時針旋轉transform:rotate(-60deg) //逆時針旋轉.demo pre{ transform:rotate(45deg); font-size:200px; line-height:300px; text-align:center;}<div class="demo"> <pre>C</pre></div>

• transform:translate(x軸 y軸(可不寫))
• transform:translateX()
• transform:translateY()
• 單位px %等

transform:translate(20px,50px) //中間用逗號隔開transform:translate(-40px,20%)transform:translate(100px) //只表示x軸偏移transform:translateX(20%)transform:translateY(20%)

• transform:scale()
• scale:(<number>[,<number>]?)
• scaleX()
• scaleY()

transform:scale(1.2,2) //x軸放大1.2倍 y軸放大2倍transform:scale(1.2) // x軸 y軸都放大1.2倍transform:scaleX(1.2) //x軸放大1.2倍transform:scaleY(1.2)

• transform:skew(<angle>[,<angle>]?)
• skewX(<angle>)
• skewY(<angle>)
• X軸傾斜多少度,Y軸傾斜多少度

transform:skew(30deg) //y軸向x軸傾斜了30degtransform:skew(30deg,30deg) //y軸向x軸傾斜了30deg x軸也向y軸偏移30degtransform:skewX(45deg)transform:skewY(60deg)

從上面我們學到了很多變形技巧:rotate tranlate scale skew,我們不僅可以一個個使用,也可以組合使用

transform:translate(50px) scale(1.5);transform:translate(50px) skew(120deg);

• transform-origin:
• transform-origin CSS屬性讓你更改一個元素變形的原點
• 默認值:50% 50% 0

/* 單值語法 */transform-origin: 2px;transform-origin: bottom;/* 雙值語法 */ /* 用兩個數字值先水平後垂直，用一個數值一關鍵字或兩關鍵字不強求順序 */transform-origin: 3cm 2px; /* x-offset y-offset */transform-origin: 2px left; /* y-offset x-offset-keyword */transform-origin: left 2px; /* x-offset-keyword y-offset */transform-origin: right top; /* x-offset-keyword y-offset-keyword */transform-origin: top right; /* y-offset-keyword x-offset-keyword */ /* 三值語法 */x方向 y 方向 z方向transform-origin: 2px 30% 10px; /* x-offset y-offset z-offset */transform-origin: 2px left 10px; /* y-offset x-offset-keyword z-offset */transform-origin: left 5px -3px; /* x-offset-keyword y-offset z-offset */transform-origin: right bottom 2cm; /* x-offset-keyword y-offset-keyword z-offset */transform-origin: bottom right 2cm; /* y-offset-keyword x-offset-keyword z-offset */

之前我們了解的都是繞著Z軸旋轉,可不可以繞Y軸 X軸旋轉呢?我們來學習新的屬性

• perspective: none | <length>
• 透視效果
• length用戶到z = 0平面的距離。它用於將透視變換應用於元素及其內容

/* Keyword value */ perspective: none;/* <length> values */ perspective: 20px; perspective: 3.5em;

• perspective-origin透視角度
• perspective-origin:50% 50%默認值

/* One-value syntax */perspective-origin: x-position;perspective-origin: left/* Two-value syntax */perspective-origin: x-position y-position;perspective-origin: left centerperspective-origin: bottom 300px/* When both x-position and y-position are keywords, the following is also valid */perspective-origin: y-position x-position;/* css */perspective:2000px; //修改會有不同的視角perspective-origin:50% 50%;

在上面的了解我們只是對css元素在2d平面上的移動,傾斜,縮放,那如何在3d上動作呢?css屬性又有哪些呢?

• transform:translate3d(x, y, z)
• 屬性和translate()差不多,只不過多了一個z軸上的變換
• 也多了translateZ()

transform:translate3d(10px,20%,200px)transform:translateX(10px) transform:translateY(20%)transform:translateZ(200px)

• transform:scale3d(x, y, z<number>)
• 3d上的縮放

transform:scale3d(1.2,1.2,1); //x,y軸變大1.3倍,z不變transform:scaleZ(5) //並不會影響盒子的大小

• transform:rotate3d(<number>,<number>,<number>,<angle>)
• rotateZ(<angle>)z軸上旋轉

transform:rotate3d(0,0,1,45deg) //0,0,1表示在z軸上旋轉 ,z軸上的1與坐標原點連接transform:rotate3d(0,1,0,45deg) //表示在y軸上transform:rotate3d(1,0,0,45deg) //表示在x軸上transform:rotate3d(1,1,1,45deg) //在坐標為1,1,1與坐標原點連接線上旋轉

我們有一個新的屬性需要學習一下

• transform-style:flat | preserver-3d
• flat 扁平化 默認值
• preserve-3d 保留3d空間

transform-style:flat transform-style:preserve-3d

背面不可見怎麼辦?

• backface-visibility:visible | hidden
• visible:背面可見

backface-visibility:hidden

過渡效果

• transition-property:none | <single-transition-property>
• <single-transition-property> = all | IDENT
• none沒有過渡動畫
• all所有可被動畫的屬性都表現出過渡動畫
• IDENT屬性名稱。由小寫字母 a 到 z，數字 0 到 9，下劃線（_）和破折號（-）。第一個非破折號字元不能是數字。同時，不能以兩個破折號開頭

/* Keyword values */transition-property: none;transition-property: all;transition-property: test_05;transition-property: -specific;transition-property: sliding-vertically;

/* css示例 */.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;font-size:20px;text-align:center;}.m-demo:hover pre{left:500px;color:#000;}.m-demo-1 pre{transition-property:none;}.m-demo-2 pre{transition-property:all;}.m-demo-3 pre{transition-property:left;}.m-demo-4 pre{transition-property:left,color;padding:20px 0;line-height:30px;}<div class="m-demo m-demo-1"> <pre>none</pre> </div><div class="m-demo m-demo-2"> <pre>all</pre> </div> <div class="m-demo m-demo-3"> <pre>left</pre></div><div class="m-demo m-demo-4"> <pre>left,<br>color</pre></div>

• transtion-duration:<time> [,<time>]*
• time表示過渡屬性從舊的值轉變到新的值所需要的時間。如果時長是 0s ，表示不會呈現過渡動畫，屬性會瞬間完成轉變。不接受負值。
• 以秒或毫秒為單位指定過渡動畫所需的時間。默認值為 0s ，表示不出現過渡動畫
• 可以指定多個時長，每個時長會被應用到由 transition-property指定的對應屬性上。如果指定的時長個數小於屬性個數，那麼時長列表會重複。如果時長列表更長，那麼該列表會被裁減。兩種情況下，屬性列表都保持不變。

/* <time> 值 */transition-duration: 6s;transition-duration: 120ms;transition-duration: 1s, 15s;transition-duration: 10s, 30s, 230ms;

/* css示例 */.m-demo:hover pre{left:500px;color:#000;}.m-demo pre:nth-child(1){transition-duration:0s;top:0;}.m-demo pre:nth-child(2){transition-duration:1s;top:150px;}.m-demo pre:nth-child(3){transition-duration:2s;top:300px;}.m-demo pre:nth-child(4){transition-duration:3s;top:450px;}<div class="m-demo m-demo-1"> <pre>0s</pre> <pre>1s</pre> <pre>2s</pre> <pre>3s</pre></div>

• transition-timing-function
• 定義過渡變化函數

可以取得值transition-timing-function: ease //默認值,兩頭慢,中間快transition-timing-function: ease-in //開始慢transition-timing-function: ease-out //結束慢transition-timing-function: ease-in-out //開始結束慢,中間快 幅度大一點transition-timing-function: linear //勻速transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) //曲線,設置兩個點x,ytransition-timing-function: step-starttransition-timing-function: step-endtransition-timing-function: steps(4, end) //分為4步,每步結尾動畫transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)transition-timing-function: inherit

/* css DEMO */.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}.m-demo:hover pre{left:500px;color:#000;}.m-demo pre:nth-child(1){transition-timing-function:ease;top:0;}.m-demo pre:nth-child(2){transition-timing-function:linear;top:150px;}.m-demo pre:nth-child(3){transition-timing-function:ease-out;top:300px;}.m-demo pre:nth-child(4){transition-timing-function:cubic-bezier(0.8,0,0,0.8);top:450px;padding:30px 0;line-height:20px;font-size:12px;}.m-demo pre:nth-child(5){transition-timing-function:steps(3,start);top:600px;padding:30px 0;line-height:20px;font-size:16px;}<div class="m-demo m-demo-1"> <pre>ease</pre> <pre>linear</pre> <pre>ease-out</pre> <pre>cubic-bezier<br>(0.8,0,0,0.8)</pre> <pre>steps<br>(3,start)</pre></div>

• transtion-delay:<time>#
• time表明動畫效果屬性生效之前需要等待的時間。延遲時間

/* <time>值 */transition-delay: 3s;transition-delay: 2s, 4ms;

/* css示例 */.m-demo:hover pre{left:500px;color:#000;}.m-demo pre:nth-child(1){transition-delay:0s;top:0;}.m-demo pre:nth-child(2){transition-delay:1s;top:150px;}.m-demo pre:nth-child(3){transition-delay:2s;top:300px;}.m-demo pre:nth-child(4){transition-delay:3s;top:450px;}<div class="m-demo m-demo-1"> <pre>0s</pre> <pre>1s</pre> <pre>2s</pre> <pre>3s</pre></div>

• transtion: property name | duration | timing function | delay 簡寫屬性
• 初始值:all 0 ease 0
• 在transition屬性中，各個值的書寫順序是很重要的：第一個可以解析為時間的值會被賦值給transition-duration，第二個可以解析為時間的值會被賦值給transition-delay

/* Apply to 1 property */ /* property name | duration */transition: margin-right 4s;/* property name | duration | delay */transition: margin-right 4s 1s;/* property name | duration | timing function */transition: margin-right 4s ease-in-out;/* property name | duration | timing function | delay */transition: margin-right 4s ease-in-out 1s;/* Apply to 2 properties */transition: margin-right 4s, color 1s;/* Apply to all changed properties */transition: all 0.5s ease-out;

動畫

• 後續再更新...

推薦閱讀：