css 旋转45_CSS教程——第14期
警告！本期內(nèi)容建議CSS基礎(chǔ)良好的人看，本期為實(shí)戰(zhàn)篇，難度有點(diǎn)大
哈嘍大家好我是wawjf
灰常抱歉我們咕咕了快兩周，主要原因是我們的幾位作者(加上我其實(shí)就兩個)去夏令營學(xué)習(xí)了某重要東西，所以沒時間更新，在這里對催更的各位朋友們說聲對不起哈
(放個照片各位自己感受)
如果我猜得沒錯，這期應(yīng)該是正式期的最后一期了，接下來有時間可能會出番外篇，但是是不定時哦
這期我們就來講一個很重要的內(nèi)容——3D變形(動畫)的實(shí)戰(zhàn)
1題干
我們要用3D變形(動畫)制作一個正方體，然后設(shè)計它在光標(biāo)經(jīng)過時沿Y軸旋轉(zhuǎn)，像下面這樣：
2思路
首先我們要來梳理一下我們做這個動畫的流程，這里我已經(jīng)幫大家梳理好了：
第1步，我們要先對盒子進(jìn)行一個設(shè)計
第2步，我們要對盒子做一些樣式調(diào)整以及變形(動畫)的安排
第3步，我們要定義關(guān)鍵幀
第4步，定義動畫的觸發(fā)方式
注意：在過程中，各位可能會看到一些沒遇到過的屬性，不必?fù)?dān)心，因為這些屬性比較冷門，所以我們不會當(dāng)作重點(diǎn)來教學(xué)，大家只要知道即可
3實(shí)踐
我們先寫好基本代碼：
3.1盒子的設(shè)計
class="stage"> <div class="container"> <div class="side front">前面div> <div class="side back">背面div> <div class="side left">左面div> <div class="side right">右面div> <div class="side top">頂面div> <div class="side bottom">底面div> div></div>這個比較好理解，首先我們先用一個大容器stage來定義立方體，然后再定義每一面，并取名
3.2樣式安排
這個比較復(fù)雜，我們區(qū)分講
3.2.1定義畫布
.stage { width: 300px; height: 300px; margin: 15px auto; position: relative; perspective: 300px;}這里表示創(chuàng)建一個高300px(height)，寬300px(width)的一個畫布，其中有一個屬性我們可能沒講過，那就是perspective，這個屬性用來設(shè)置視圖的距離(其實(shí)一點(diǎn)用處都沒有)
3.2.2定義盒子的億些樣式
.container { top: 50%; left: 50%; margin: -100px 0 0 -100px; position: absolute;????transform:?translateZ(-100px);????transform-style:?preserve-3d;}這個用來定義盒子包含框的樣式，transform-style表示元素的呈現(xiàn)形式，默認(rèn)就是preserve-3d，表示在3D中呈現(xiàn)(沒用*2)
.side { background: rgba(255,0,0,0.3); border: 1px solid red; font-size: 60px; font-weight: bold; color: #fff; height: 196px; line-height: 196px; position: absolute; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); text-transform: uppercase; width: 196px;}這個用來定義盒子六面的基本樣式，應(yīng)該沒有我們沒講過的，不知道rgba的請自行網(wǎng)上搜索
.front?{ transform: translateZ(100px);}.back?{ transform: rotateX(180deg) translateZ(100px);}.left {????transform:?rotateY(-90deg)?translateZ(100px);}.right {????transform:?rotateY(90deg)?translateZ(100px);}.top {????transform:?rotateX(90deg)?translateZ(100px);}.bottom {????transform:?rotateX(-90deg)?translateZ(100px);}3.3定義動畫關(guān)鍵幀
@keyframes spin { 0% {transform:rotateY(0deg)} 100% {transform:rotateY(360deg)}}這個也比較好理解，看過上期的就知道，這里我們定義了一個名叫spin的關(guān)鍵幀，在動畫的開頭以Y軸為準(zhǔn)旋轉(zhuǎn)0度，在結(jié)尾旋轉(zhuǎn)360度，其實(shí)就是一個補(bǔ)間動畫
3.4定義動畫觸發(fā)方式
.container:hover?{ animation: spin 5s linear infinite;}這里我們運(yùn)用了hover選擇器，表示當(dāng)鼠標(biāo)的位置在元素上的時候，觸發(fā)的動作
animation的函數(shù)我們也講過了，就是引用我們上面定義的spin函數(shù)，然后對時間，動畫運(yùn)動等參數(shù)進(jìn)行設(shè)定，不懂的看前面
------------
沒錯，我們的代碼寫完了
完整代碼如下————
<html><head> <meta charset="utf-8"><style?type="text/css"> @keyframes spin { 0% {transform:rotateY(0deg)} 100% {transform:rotateY(360deg)}}.stage { width: 300px; height: 300px; margin: 15px auto; position: relative; perspective: 300px;}.container { top: 50%; left: 50%; margin: -100px 0 0 -100px;????position:?absolute;????transform:?translateZ(-100px); transform-style: preserve-3d;}.container:hover?{ animation: spin 5s linear infinite;}.side { background: rgba(255,0,0,0.3); border: 1px solid red; font-size: 60px; font-weight: bold; color: #fff; height: 196px; line-height: 196px; position: absolute; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); text-transform: uppercase; width: 196px;}.front?{ transform: translateZ(100px);}.back?{ transform: rotateX(180deg) translateZ(100px);}.left?{ transform: rotateY(-90deg) translateZ(100px);}.right?{ transform: rotateY(90deg) translateZ(100px);}.top?{ transform: rotateX(90deg) translateZ(100px);}.bottom?{ transform: rotateX(-90deg) translateZ(100px);}style><title>title>head><body><div class="stage"> <div class="container"> <div class="side front">前面div> <div class="side back">背面div> <div class="side left">左面div> <div class="side right">右面div> <div class="side top">頂面div> <div class="side bottom">底面div> div>div>body>html>沒錯，那么這樣我們的動畫就可以實(shí)現(xiàn)啦~
如果你沒聽懂或者出了問題，可以私信公眾號哦，我們看到就會盡快回復(fù)的
好啦，那么我們的CSS教程差不多就要告一段落了，接下來我可能會開始教JQuery或者幫阿列克謝寫JS，或者寫C++……反正我能寫的我都會盡量安排啦，各位盡情期待哦
作者：
wawjf
(我愛微積分)
四五工作室副室長(嗯，我也是)
四五議會?45-2(沒想到我是45-2吧)
??喜歡研究理科類東西?
08年出生，福建福州人，未來的█████
?????自學(xué)微積分，低調(diào)低調(diào)
??????????????????????本來想研究算法，結(jié)果在這邊寫稿屯圖片
(PS：名字讀作：瓦韋杰夫)關(guān)注四五工作室，從零開始學(xué)WEB
總結(jié)
以上是生活随笔為你收集整理的css 旋转45_CSS教程——第14期的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果手机APP五年没用自动扣费上千元 官
- 下一篇： 广汽埃安固态电池 2026 年率先在昊铂