在學習transition, transform和translate這三個屬性的時候，發(fā)現(xiàn)了一個例子包括了以下幾個屬性狂秘，覺得挺有意思磅甩，對學習這三個屬性也很有幫助玷氏。
- transform
- translate
- rotate
- perspective
- perspective-origin
先看看MDN上一個CSS屬性 perspective 的一個例子
https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective-origin
<div class="container">
<div class="cube pers">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<style>
.pers {
perspective: 350px;
}
.container {
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
</style>
效果圖：
立方體.png
這個例子是HTML+CSS畫出來的一個正方體，它是怎么做的呢？
HTML代碼非常簡單赂苗，一個container裝了一個cube愉耙，這個cube有6個face。
CSS部分拌滋，每個face都是100×100 px的正方形朴沿，每個face的transform屬性不一樣，由不同的translate和rotate的值組成败砂。嘗試把每個face的transform屬性去掉赌渣，來看看效果。
把transform屬性去掉后的效果.png
6個面堆疊在一起了昌犹，由些可見坚芜，正方體就是6個平面正方形經(jīng)過旋轉(zhuǎn)和平移，構(gòu)成一個正方體祭隔，這個我們實際的操作也很一致货岭。
先來看看立體的x y z坐標系：
坐標系.png
結(jié)合坐標系：
- 正面front：把正方形沿z軸平移50px
transform: translateZ(50px);
- 背面back：把正方形沿z軸平移50px，并以y軸旋轉(zhuǎn)順時針180度
transform: rotateY(180deg) translateZ(50px);
- 右面right：把正方形沿z軸平移50px疾渴，并以y軸旋轉(zhuǎn)順時針90度
transform: rotateY(90deg) translateZ(50px);
- 左面left：把正方形沿z軸平移50px千贯，并以y軸逆時針旋轉(zhuǎn)90度
transform: rotateY(-90deg) translateZ(50px);
- 上面top：把正方形沿z軸平移50px，并以x軸順時針旋轉(zhuǎn)90度
transform: rotateX(90deg) translateZ(50px);
- 底面bottom：把正方形沿z軸平移50px搞坝，并以x軸逆時針旋轉(zhuǎn)90度
transform: rotateX(-90deg) translateZ(50px);
只看概念是不是還是有點難想象呢搔谴？這時候，我們可以加上transition屬性桩撮，用動畫效果還幫我們看看敦第。
每一個face加一個觸發(fā)事件，加上"transition : '2s'"
添加button.png
依次點擊每個button店量，可以看到face從開始的位置變換到正方體的位置芜果。transiton的作用就是給一個2s的時間，讓我們看到變化的過程融师。
效果.png
完整代碼
<div class="container">
<div class="cube pers">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<button onclick="changeFront()">Front</button>
<button onclick="changeBack()">Back</button>
<button onclick="changeRight()">Right</button>
<button onclick="changeLeft()">Left</button>
<button onclick="changeTop()">Top</button>
<button onclick="changeBottom()">Bottom</button>
<style>
.pers {
perspective: 350px;
}
.container {
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
background-color: thistle;
text-align: center;
}
/* Define each face based on direction */
</style>
<script>
function changeFront() {
let face = document.querySelector(".face.front");
face.style.background = 'rgba(0, 0, 0, 0.3)';
face.style.transform = 'translateZ(50px)';
face.style.transition = '2s'
}
function changeBack() {
let face = document.querySelector(".face.back");
face.style.background = 'rgba(0, 255, 0, 1)';
face.style.transform = 'rotateY(180deg) translateZ(50px)';
face.style.transition = '2s'
}
function changeRight() {
let face = document.querySelector(".face.right");
face.style.background = 'rgba(196, 0, 0, 0.7)';
face.style.transform = 'rotateY(90deg) translateZ(50px)';
face.style.transition = '2s'
}
function changeLeft() {
let face = document.querySelector(".face.left");
face.style.background = 'rgba(0, 0, 196, 0.7)';
face.style.transform = 'rotateY(-90deg) translateZ(50px)';
face.style.transition = '2s'
}
function changeTop() {
let face = document.querySelector(".face.top");
face.style.background = 'rgba(196, 196, 0, 0.7)';
face.style.transform = 'rotateX(90deg) translateZ(50px)';
face.style.transition = '2s'
}
function changeBottom() {
let face = document.querySelector(".face.bottom");
face.style.background = 'rgba(196, 0, 196, 0.7)';
face.style.transform = 'rotateX(-90deg) translateZ(50px)';
face.style.transition = '2s'
}
</script>
總結(jié)一下右钾，rotate和translate都是transform的子屬性，后面加上X Y Z代表以x軸旱爆、y軸舀射、z軸為基礎(chǔ)旋轉(zhuǎn)/平移。
-
transform: CSS變換函數(shù)怀伦，可以旋轉(zhuǎn)脆烟，縮放，傾斜或平移給定元素房待。-
rotate：正數(shù)時順時針旋轉(zhuǎn)邢羔，負數(shù)時逆時針旋轉(zhuǎn) -
translate: 正數(shù)時正方向平移驼抹，負數(shù)時反方向平移
-
-
transition: CSS過渡函數(shù)
另外，perspective屬性：[CSS]一起來畫立方體: CSS perspective屬性
參考：
https://www.w3.org/TR/css-transforms-2
https://drafts.csswg.org/css-transitions
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
