前言
本文介紹的是css3的3d模塊，對大家具有一定的參考價值，感興趣的朋友們下面來一起看看吧。
介紹
首先，我們來了解一下3d的坐標系，x軸在屏幕上為水平方向，y軸為垂直方向，而z軸為垂直于屏幕的方向。
不理解的話可以參考定位屬性的z-index屬性，那個在某種意義上就是讓元素在z軸的移動。
在2d轉換模塊中我們研究了rotateX()和rotateY()方法，就是繞x軸和y軸旋轉，這其實就是3d模塊的一種表現，當然要看到近大遠小的3d效果，還需要在父元素上添加透視屬性：transform:perspective（500px）;值為透視點到元素的距離，具體概念請看美術透視教學。。。。
多說無益，上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
}
.div1{
margin-top: 100px;
transform:perspective(500px) rotatey(0deg);
position: relative;
border:1px solid #000000;
background-color: #ff0000;
}
.div1 div{
transform:rotatey(45deg);
position: absolute;
font-size: 80px;
line-height: 200px;
text-align: center;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">1</div>
</div>
</body>
</html>
效果圖：
但是，你會發現當父元素轉到90度的時候元素消失了，這就說明元素是沒有厚度的。說明元素雖然具有了近大遠小的透視屬性，但本質上仍是2d的。
這是你需要添加transform-style:preserve-3d;樣式來讓元素在3d空間中轉換。這樣，元素就處在了3維的空間里，當父元素旋轉90度，仍能看到里面的子元素。
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
}
.div1{
margin-top: 100px;
transform:perspective(500px) rotatey(0deg);
transform-style:preserve-3d;
position: relative;
border:1px solid #000000;
}
.div1 div{
background-color: #ff0000;
transform:rotatey(45deg);
position: absolute;
font-size: 80px;
line-height: 200px;
text-align: center;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">1</div>
</div>
</body>
</html>
效果圖：
上面，我們對3d轉換模塊有了一個初步的了解，下面我們一起做一個正方體，來整理一下3d模塊的知識。
一步步來做著寫太過麻煩，我就將過程寫在代碼的注釋里，小伙伴們請見諒。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轉換模塊-正方體</title>
<style>
*{
margin: 0;
padding: 0;
/*去除默認邊距*/
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
position: relative;
/*修改基本樣式*/
transform: rotateY(45deg) rotateX(45deg);
/*旋轉看看效果*/
transform-style: preserve-3d;
/*將父元素設置為3d空間*/
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
/*修改基本樣式*/
}
ul li:nth-child(1){
background-color: red;
transform: translateX(-100px) rotateY(90deg);
/*將第一個l向左移動100像素，然后繞y軸旋轉90度，形成左邊的面*/
}
ul li:nth-child(2){
background-color: green;
transform: translateX(100px) rotateY(90deg);
/*將第一個2向右移動100像素，然后繞y軸旋轉90度*，形成右邊的面*/
}
ul li:nth-child(3){
background-color: blue;
transform: translateY(-100px) rotateX(90deg);
/*將第一個3向上移動100像素，然后繞x軸旋轉90度，形成上面的面*/
}
ul li:nth-child(4){
background-color: yellow;
transform: translateY(100px) rotateX(90deg);
/*將第一個4向下移動100像素，然后繞x軸旋轉90度*/
}
ul li:nth-child(5){
background-color: purple;
transform: translateZ(-100px);
/*將第一個5向后移動100像素，形成后面的面*/
}
ul li:nth-child(6){
background-color: pink;
transform: translateZ(100px);
/*將第一個l向前移動100像素，形成前面的面*/
}
</style>
</head>
<body>
<ul>
<!--首先做好html布局，正方體有6個面，所以寫了6個li-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
效果圖：
這個方法比較好理解，理解了之后請看下一個。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。