今天簡(jiǎn)單總結(jié)一下關(guān)于實(shí)現(xiàn)3D的幾個(gè)較為重要的注意點(diǎn)吏饿。
一踪危、透視
1.描述
- 如果想要在網(wǎng)頁(yè)內(nèi)產(chǎn)生3D效果需要透視。（理解成3D物體投影在2D平面內(nèi)）
- 模擬人類的視覺位置猪落，可認(rèn)為安排一直眼睛去看贞远。
- 透視我們也稱為視距：視距就是人的眼睛到屏幕的距離。
- 距離視覺點(diǎn)越近的在電腦屏幕成像越大笨忌，反之越遠(yuǎn)就越小蓝仲。
- 透視的單位是像素
2.圖解
- d: 就是視距，就是人的眼睛到屏幕的距離官疲。
- z: 就是z軸袱结，物體距離屏幕的位置，z值越大（正值）途凫，我們看到的物體就越大
3.代碼
perspective: <視距>;
#例如：
perspective: 500px;
二垢夹、3D呈現(xiàn)transform-style
1.描述
- 控制子元素是否開啟三維立體環(huán)境。
- transform-style: flat;子元素不開啟3D立體空間（默認(rèn)的）
- transform-style: preserve-3d;子元素開啟3D立體空間
- 代碼寫給父盒子维费，但是影響的是子盒子
2.代碼
transform-style: preserve-3d;
三果元、3D導(dǎo)航示例
1.代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
margin: 15px;
width: 240px;
height: 70px;
list-style: none;
/* 設(shè)置透視:視距為500px */
perspective: 500px;
cursor: pointer;
}
.box {
position: relative;
width: 100%;
height: 100%;
/* 設(shè)置子盒子保持3d效果 */
transform-style: preserve-3d;
/* 增加過(guò)渡效果 */
transition: all .4s;
}
.box:hover {
/* 鼠標(biāo)移動(dòng)上去，盒子向上翻轉(zhuǎn)90度 */
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
line-height: 70px;
}
.front {
background-color: blueviolet;
z-index: 1;
transform: translateZ(35px);
}
.bottom {
background-color: pink;
/* 如果有移動(dòng)或者其他樣式掩完，必須先寫移動(dòng) */
transform: translateY(35px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">周星星</div>
<div class="bottom">新年快樂</div>
</div>
</li>
<li>
<div class="box">
<div class="front">周星星</div>
<div class="bottom">萬(wàn)事如意</div>
</div>
</li>
<li>
<div class="box">
<div class="front">周星星</div>
<div class="bottom">闔家幸福</div>
</div>
</li>
<li>
<div class="box">
<div class="front">周星星</div>
<div class="bottom">牛氣沖天</div>
</div>
</li>
</ul>
</body>
</html>
2.效果
