css3 3D轉換以及動畫效果
不要給我說什麼底層原理、框架內核！老夫敲代碼就是一把梭！複製！粘貼！拿起鍵盤就是幹！
哈哈O(∩_∩)O 通過一個小小的demo學會css3新特性，實在不行那就複製粘貼把。
首先在瞭解3D效果之前必須先知道2D的的屬性，因爲3D效果是在二維變換的基礎上增加了Z軸從而達到3D效果。
transform
transform：有4個常用的方法
- translate()
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） - rotate()
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。 - scale()
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸） - skew()
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）
重點講下其中的translate()和rotate()也實現上面效果需要用到的
- translate()語法
div {
transform: translate(50px,100px);
}意爲從原來位置上向左和向下位移50px，100px
- rotate()語法
div {
transform: rotate(45deg);
}意爲把元素順時針旋轉 45 度，如下圖 紅色 rotate(45deg)
ok講完了 直接跳到3D部分
何爲3D?
3D互聯網，也被成爲（3dweb）它是一種立體的三維展示技術，是以計算機繪圖技術，在Web瀏覽器上展現3D的對象，是通過在瀏覽器中內嵌3D虛擬場景的手段，在保證3D立體效果的同時，有效的降低對網絡和硬件的要求，讓互聯網用戶能夠快速的體驗3D帶來的真實感受，並可讓使用者直接操控，作出如旋轉、移動、放大縮小等動作。
實現3D效果需要用到rotate3d(x,y,z,angle)，也可以寫作rotateX(angle)，rotateY(angle)，rotateZ(angle)分開定義XYZ的旋轉方向。2D的旋轉已經看過了接下來看看3D的旋轉效果
首先父級元素添加聲明3d的樣式
div {
perspective: 800px；
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
- rotateX(angle)
div {
transform: rotateX(66deg);
}
rotateY(angle)
div {
transform: rotateY(66deg);
}
- rotateZ(angle)
div {
}
怎麼樣是不是覺得上面三張圖片剛好就是組成一個矩形的個個面板呢，接下來只需要把所有元素都定位到一起然後分開設置每個面板的rotate3D()屬性就行啦。
最後簡單說下動畫效果怎麼實現
首先聲明一個動畫
@keyframes
通過 @keyframes 規則，您能夠創建動畫。
創建動畫的原理是，將一套 CSS 樣式逐漸變化爲另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間，或者通過關鍵詞 “from” 和 “to”，等價於 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
- keyframes name{}；
@keyframes three_dimensional{ 0% { transform:rotateY(0deg); perspective-origin: 50% 50%; } 50% { -webkit-transform:rotateY(-360deg); } 75% { -webkit-transform:rotateX(-180deg); } 100% { -webkit-transform:rotateX(-360deg); } }
本次案例的代碼如上，讓後通過animation把name加到樣式裏
div {
animation: three_dimensional 20s linear infinite;
}哈哈這就可以了哇！
我是Singh，希望這篇文章能對你有幫助