純css實現盒子3d旋轉效果
阿新 • • 發佈：2020-08-28
純css實現盒子3D旋轉效果
平時看到動畫下意識就覺得很難，出於畏懼心理老是不敢去碰，就像看到一個漂亮女生不敢上去搭訕，不過嘛， 再難得東西都是禁不住你死纏爛打的（追姑娘同理哈哈哈。。）所以現在就從頭理理，這個3d效果究竟是怎麼實現的。預覽效果
基礎知識
首先，css裡關於 3D 最基礎的東西要拎出來認識一下 transform-style: preserve-3d, 使被轉換的子元素保留其 3D 轉換。其次是 perspective: 800px,元素距離檢視的距離，以畫素計。 也就是我們所說的能使容器具有透視效果的一個屬性，值越大，它距離我們眼睛的距離就越近，反之同理。這兩個屬性結合，就可以呈現出3D效果。
這個栗子裡核心的屬性還有一個，是 transform:translate。
首先是 transform:translateX(),translateX是元素在X軸上的偏移，正值是向右，負值向左。
接著是 transform:translateY(),translateY是元素在Y軸上的偏移，想象一個原地旋轉的芭蕾舞者， 偏移的角度即是舞者旋轉的角度。正值是順時針角度偏移，負值是逆時針角度偏移。
最後是 transform:translateZ(),translateZ是元素在Z軸上的偏移，參照z-index值，正值是離螢幕越近， 反之亦然。
根據 translateX Y Z值的不同，即可形成盒子各面。 本次栗子正是利用該屬性，給前後左右各面加上不同值形成了以上效果。
核心程式碼
html
<div id="artical-detail">
<div class="wrap-box">
<div class="box-content">
<div class="l-front"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="l-left"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="l-back"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="l-right"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="m-front"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="m-left"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="m-back"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="m-right"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="s-front"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="s-left"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="s-back"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
<div class="s-right"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
</div>
</div>
css
<style>
/*外部容器 */
.wrap-box {
width: 100%;
height: auto;
perspective: 800px;
}
/* 核心容器 */
.box-content {
width: 200px;
height: 200px;
margin: 2em auto 10em;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: relative;
animation: rotate 10s infinite linear;
}
@keyframes rotate {
0% {
transform: rotateX(-10deg) rotateY(0deg)
}
50% {
transform: rotateX(-10deg) rotateY(180deg)
}
100% {
transform: rotateX(-10deg) rotateY(360deg)
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateX(-10deg) rotateY(0deg)
}
50% {
-webkit-transform: rotateX(-10deg) rotateY(180deg)
}
100% {
-webkit-transform: rotateX(-10deg) rotateY(360deg)
}
}
.box-content img {
width: 100%;
}
.box-content div {
position: absolute;
transition: all 0.2s ease;
left: 0;
}
/* 外層div */
.box-content div[class^="l"] {
width: 200px;
height: 200px;
top: 0;
}
/*中間div */
.box-content div[class^="m"] {
width: 150px;
height: 150px;
opacity: 0;
top: 30px;
}
/* 內層div*/
.box-content div[class^="s"] {
width: 100px;
height: 100px;
opacity: 0;
top: 50px;
}
.box-content:hover div[class^="l"] {
top: 0;
}
.box-content:hover div[class^="m"] {
opacity: 1;
}
.box-content:hover div[class^="s"] {
opacity: 1;
}
/* 前方元素 */
.box-content div[class*="front"] {
transform: translateZ(100px);
-webkit-transform: translateZ(100px);
}
/* 左邊元素 */
.box-content div[class*="left"] {
transform: translateX(-100px) rotateY(-90deg);
-webkit-transform: translateX(-100px) rotateY(-90deg);
}
/* 後方元素 */
.box-content div[class*="back"] {
transform: translateZ(-100px);
-webkit-transform: translateZ(-100px);
}
/* 右邊元素 */
.box-content div[class*="right"] {
transform: translateX(100px) rotateY(90deg);
-webkit-transform: translateX(100px) rotateY(90deg);
}
.box-content:hover div.l-front {
transform: translateZ(250px);
-webkit-transform: translateZ(250px);
}
.box-content:hover div.m-front {
transform: translateZ(150px);
-webkit-transform: translateZ(150px);
}
.box-content:hover div.s-front {
transform: translateZ(50px);
-webkit-transform: translateZ(50px);
}
.box-content:hover div.l-left {
transform: translateX(-250px) rotateY(-90deg);
-webkit-transform: translateX(-250px) rotateY(-90deg);
}
.box-content:hover div.m-left {
transform: translateX(-150px) rotateY(-90deg);
-webkit-transform: translateX(-150px) rotateY(-90deg);
}
.box-content:hover div.s-left {
transform: translateX(-50px) rotateY(-90deg);
-webkit-transform: translateX(-50px) rotateY(-90deg);
}
.box-content:hover div.l-back {
transform: translateZ(-250px);
-webkit-transform: translateZ(-250px);
}
.box-content:hover div.m-back {
transform: translateZ(-150px);
-webkit-transform: translateZ(-150px);
}
.box-content:hover div.s-back {
transform: translateZ(-50px);
-webkit-transform: translateZ(-50px);
}
.box-content:hover div.l-right {
transform: translateX(250px) rotateY(90deg);
-webkit-transform: translateX(250px) rotateY(90deg);
}
.box-content:hover div.m-right {
transform: translateX(150px) rotateY(90deg);
-webkit-transform: translateX(150px) rotateY(90deg);
}
.box-content:hover div.s-right {
transform: translateX(50px) rotateY(90deg);
-webkit-transform: translateX(50px) rotateY(90deg);
}
</style>