警告！本期內容建議css基礎良好的人看，本期為實戰篇，難度有點大
灰常抱歉我們咕咕了快兩周，主要原因是我們的幾位作者(加上我其實就兩個)去夏令營學習了某重要東西，所以沒時間更新，在這裡對催更的各位朋友們說聲對不起哈
(放個**各位自己感受)
如果我猜得沒錯，這期應該是正式期的最後一期了，接下來有時間可能會出番外篇，但是是不定時哦
這期我們就來講乙個很重要的內容——3d變形(動畫)的實戰
1題幹
我們要用3d變形(動畫)製作乙個正方體，然後設計它在游標經過時沿y軸旋轉，像下面這樣：
2思路
第1步，我們要先對盒子進行乙個設計
第2步，我們要對盒子做一些樣式調整以及變形(動畫)的安排
第3步，我們要定義關鍵幀
第4步，定義動畫的觸發方式
3實踐
我們先寫好基本**：
class="stage">前面div>背面div>左面div>右面div>頂面div>底面div>div>
這個比較好理解，首先我們先用乙個大容器stage來定義立方體，然後再定義每一面，並取名3.2樣式安排這個比較複雜，我們區分講
3.2.1定義畫布
.stage這裡表示建立乙個高300px(height)，寬300px(width)的乙個畫布，其中有乙個屬性我們可能沒講過，那就是perspective，這個屬性用來設定檢視的距離(其實一點用處都沒有)3.2.2定義盒子的億些樣式.container這個用來定義盒子包含框的樣式，transform-style表示元素的呈現形式，預設就是preserve-3d，表示在3d中呈現(沒用*2).side這個用來定義盒子六面的基本樣式，應該沒有我們沒講過的，不知道rgba的請自行網上搜尋.front .back .left .right .top .bottom3.3定義動畫關鍵幀@keyframes spin 100% }這個也比較好理解，看過上期的就知道，這裡我們定義了乙個名叫spin的關鍵幀，在動畫的開頭以y軸為準旋轉0度，在結尾旋轉360度，其實就是乙個補間動畫3.4定義動畫觸發方式.container:hover這裡我們運用了hover選擇器，表示當滑鼠的位置在元素上的時候，觸發的動作animation的函式我們也講過了，就是引用我們上面定義的spin函式，然後對時間，動畫運動等引數進行設定，不懂的看前面------------沒錯，我們的**寫完了
完整**如下————
@keyframes spin 100% }.stage .container .container:hover .side .front .back .left .right .top .bottom style>title>head>前面div> 背面div> 左面div> 右面div> 頂面div> 底面div> div>div>body>html>沒錯，那麼這樣我們的動畫就可以實現啦~好啦，那麼我們的css教程差不多就要告一段落了，接下來我可能會開始教jquery或者幫阿列克謝寫js，或者寫c++……反正我能寫的我都會盡量安排啦，各位盡情期待哦(我愛微積分)
四五工作室副室長(嗯，我也是
四五議會 45-2(沒想到我是45-2吧
喜歡研究理科類東西
08年出生，福建福州人，未來的█████
自學微積分，低調低調
本來想研究演算法，結果在這邊寫稿屯
(ps：名字讀作：瓦韋傑夫)關注四五工作室，從零開始學web
css旋轉45度 css 漸變過渡2D
一 過渡屬性 transition css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠劃過 單擊 獲得焦點或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值 過渡屬性需要觸發事件，如 hover 滑鼠劃過事件 1.transition prop...
css旋轉45度 CSS動畫 2D 3D轉換
css動畫 2d 3d轉換 2d 轉換 1 translate 方法 通過 translate 方法，元素從其當前位置移動，根據給定的 left x 座標 和 top y 座標 位置引數 例項 divtransform translate 50px,100px 值 translate 50px,10...
HTML5與CSS3基礎教程 第7章 CSS構造塊
html5與css3基礎教程 第8版 第7章讀書筆記 rem單位 10.6章節。hsl rgba hsla格式是在css3引入的 rgb不是 css3還擴充套件了原有的16個基本顏色名稱。使用css優先順序適配老瀏覽器 p137 比如css的alpha透明度是在ie9之後才支援的，可以通過css的優...