如何使用纯CSS3制作3d网红热词盒子

这篇文章主要介绍了如何使用纯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网红热词盒子”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!