这篇文章主要介绍了如何使用纯CSS3制作3d网红热词盒子，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
HTML代码：
<div id="effect-3d-box">
<div class="area">盘他</div>
<div class="area">柠檬精</div>
<div class="area">OMG</div>
<div class="area">我太难了</div>
<div class="area">996</div>
<div class="area">我信你个鬼</div>
</div>
CSS3代码：
#effect-3d-box {
position: relative;
margin: auto;
margin-top: 80px;
margin-bottom: 80px;
width: 100px;
height: 100px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
animation: rotate 20s linear 0s infinite;
-webkit-animation: rotate 20s linear 0s infinite;
}
#effect-3d-box > .area {
position: absolute;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #e74c3c;
color: white;
}
#effect-3d-box > .area:nth-child(2) {
transform: translateZ(-100px) rotateX(180deg);
-webkit-transform: translateZ(-100px) rotateX(180deg);
-moz-transform: translateZ(-100px) rotateX(180deg);
-ms-transform: translateZ(-100px) rotateX(180deg);
-o-transform: translateZ(-100px) rotateX(180deg);
background-color: #e67e22;
}
#effect-3d-box > .area:nth-child(3) {
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform-origin: 50% 0 0;
background-color: #f1c40f;
}
#effect-3d-box > .area:nth-child(4) {
transform: rotateX(90deg) rotateY(180deg);
-webkit-transform: rotateX(90deg) rotateY(180deg);
-moz-transform: rotateX(90deg) rotateY(180deg);
-ms-transform: rotateX(90deg) rotateY(180deg);
-o-transform: rotateX(90deg) rotateY(180deg);
transform-origin: 50% 100% 0;
background-color: #2ecc71;
}
#effect-3d-box > .area:nth-child(5) {
transform: rotateY(90deg) rotateX(180deg);
-webkit-transform: rotateY(90deg) rotateX(180deg);
-moz-transform: rotateY(90deg) rotateX(180deg);
-ms-transform: rotateY(90deg) rotateX(180deg);
-o-transform: rotateY(90deg) rotateX(180deg);
transform-origin: 0 50% 0;
background-color: #3498db;
}
#effect-3d-box > .area:nth-child(6) {
transform: rotateY(-90deg) rotateX(180deg);
-webkit-transform: rotateY(-90deg) rotateX(180deg);
-moz-transform: rotateY(-90deg) rotateX(180deg);
-ms-transform: rotateY(-90deg) rotateX(180deg);
-o-transform: rotateY(-90deg) rotateX(180deg);
transform-origin: 100% 50% 0;
background-color: #9b59b6;
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
-webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
-moz-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
-ms-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
-o-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
}
}
感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用纯CSS3制作3d网红热词盒子”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
