1.transform-style 指定某元素的子元素是（看起來）位於三維空間內，還是在該元素所在的平面內被扁平化
取值：flat | preserve-3d
- flat：默認值，指定子元素位於此元素所在平面內
- preserve-3d：指定子元素定位在三維空間內
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>transform-style</title>
<style>
body {
perspective: 1000px;
}
.cube {
position: relative;
font-size: 80px;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(30deg);
}
.cube > div {
position: absolute;
width: 2em;
height: 2em;
background: rgba(0, 0, 0, .3);
border: 1px solid #999;
color: white;
text-align: center;
line-height: 2em;
}
.front {
transform: translateZ(1em);
}
.top {
transform: rotateX(90deg) translateZ(1em);
}
.right {
transform: rotateY(90deg) translateZ(1em);
}
.left {
transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
transform: rotateX(-90deg) translateZ(1em);
}
.back {
transform: rotateY(-180deg) translateZ(1em);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</body>
</html>
示例代碼效果截圖：
2.perspective 指定觀察者與「z=0」平面的距離，使具有三維位置變換的元素產生透視效果
「z>0」的三維元素比正常大，而「z<0」時則比正常小，大小程度由該屬性的值決定。當該屬性值爲「非none」時，元素將會創建局部堆疊上下文。
取值：none | <length>
- none：不指定透視
- <length>：指定觀察者距離「z=0」平面的距離，爲元素及其內容應用透視變換。不允許負值
3.perspective-origin 指定透視點的位置
取值：[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]
該屬性提供2個參數值。如果提供兩個，第一個用於橫座標，第二個用於縱座標。如果只提供一個，該值將用於橫座標；縱座標將默認爲center。
（1）<percentage>：用百分比指定透視點座標值，相對於元素寬度。可以爲負值。
（2）<length>：用長度值指定透視點座標值。可以爲負值。
- left：指定透視點的橫座標爲left
- center：指定透視點的橫座標爲center
- right：指定透視點的橫座標爲right
- top：指定透視點的縱座標爲top
- center：指定透視點的縱座標爲center
- bottom：指定透視點的縱座標爲bottom
4.backface-visibility 指定元素背面面向用戶時是否可見
取值：visible | hidden
決定一個元素背面面向用戶時是否可見，需要直接在該元素上定義 <' backface-visibility '> 屬性，而不能在其父元素上，因爲該屬性默認爲不可繼承。
- visible：指定元素背面可見，允許顯示正面的鏡像
- hidden：指定元素背面不可見
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>backface-visibility</title>
<style>
body {
perspective: 800px;
perspective-origin: 50%;
}
.wrapper{
width: 500px;
margin:30px auto 0;
}
.cube {
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
transform-style: preserve-3d;
animation: rotate 5s infinite;
}
.cube > div {
position: absolute;
width: 100%;
height: 100%;
border:1px #ff0 solid;
background-color: rgba(0, 0, 0, .3);
color: gray;
font-size: 40px;
line-height: 100px;
text-align: center;
color: #ff0;
font-family: Arial;
}
.front {
transform: translatez(50px);
}
.back {
transform: rotatey(180deg) translatez(50px);
}
.right {
transform: rotatey(90deg) translatez(50px);
}
.left {
transform: rotatey(-90deg) translatez(50px);
}
.top {
transform: rotatex(90deg) translatez(50px);
}
.bottom {
transform: rotatex(-90deg) translatez(50px);
}
@keyframes rotate {
from {
transform: rotatey(0);
}
to {
transform: rotatey(360deg);
}
}
.c1 > div {
backface-visibility: visible;
}
.c2 > div {
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="cube c1">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
<div class="cube c2">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</div>
</body>
</html>
示例代碼效果截圖：
