如何使用純CSS3制作3d網(wǎng)紅熱詞盒子

這篇文章主要介紹了如何使用純CSS3制作3d網(wǎng)紅熱詞盒子，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　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);

　　}

　　}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用純CSS3制作3d網(wǎng)紅熱詞盒子”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!