溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css如何實現3d立體魔方，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
先看效果圖吧！把這個看會了，一些網上的3d的相冊你就都會了
一、我們先準備好們的html代碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>3d立體魔方</title> <meta charset="UTF-8"> </head> <body> <div class="top"></div> <!--上 --> <div class="bottom"></div> <!--下 --> <div class="left"></div> <!--左 --> <div class="right"></div> <!--右 --> <div class="after"></div> <!--后 --> <div class="before"></div> <!--前 --> </body> </html>
好了我們html代碼就準備完成了,首先我們要有一個3d的思維,在大腦中現象一下魔方是什么樣子的,不就是用六個面組成的嗎。
二、添加css樣式
*{
margin:0; /* 默認樣式去掉邊距 */
padding:0;
}
div{ /* div通用樣式 設置高寬*/
width: 300px;
height: 300px;
opacity:0.5; /*透明度 半透明*/
}
.top{ /* 通過類名設置顏色下面都是設置顏色*/
background-color:brown;
}
.bottom{
background-color:blueviolet;
}
.left{
background-color:blanchedalmond;
}
.right{
background-color:cadetblue;
}
.after{
background-color:chocolate;
}
.before{
background-color:cyan;
}好了到了這一步就相當與把地基打好了，我們開始蓋樓了
你看到的必須是這個效果注意我這里是縮小了，你應該也是和我一樣方塊都是挨著的，像柱子一樣堆著的。這下我們就要開始像紙片一樣把他們拼湊起來了。
2、讓div重合
div{
width: 300px;
height: 300px;
position: absolute; /*在div的通用樣式中加上絕對定位*/
}
body{ /*下面這一步是居中讓所有的div在屏幕上居中*/
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
現在你們看到的是這個效果，明明6個方塊怎么只有一個，其實并不是，只是其他的div在這個div的后面，前面這個div擋住我們的視線了所以看不見。
三、開啟3d空間
body{
transform-style: preserve-3d; /*只需要這一條代碼開啟3d空間*/
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}在把div拼湊起來
.top{
background-color:brown;
transform:rotateX(90deg) translateZ(150px); /*先旋轉在偏移*/
}
.bottom{
background-color:blueviolet;
transform:rotateX(-90deg) translateZ(150px);
}
.left{
background-color:blanchedalmond;
transform:rotateY(-90deg) translateZ(150px);
}
.right{
background-color:cadetblue;
transform:rotateY(90deg) translateZ(150px);
}
.after{
background-color:chocolate;
transform:rotateY(180deg) translateZ(150px);
}
.before{
background-color:cyan;
transform:rotateY(0deg) translateZ(150px);
}
你們看到的應該還是這個樣子，其實我們已經完成了魔方的拼接，只是魔方是平放著的我們看不出來，所以做一個動畫旋轉一下就ok了。你給div加上一點文字更容易觀察
四、動畫旋轉
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>3d立體魔方</title>
<meta charset="UTF-8">
<style type="text/css">
*{
margin:0;
/* 默認樣式去掉邊距 */
padding:0;
}
div{
width: 300px;
height: 300px;
position: absolute;
opacity: 0.5;
text-align: center;
line-height: 300px;
}
body{
transform-style: preserve-3d;
height: 100vh;
animation: fram1 10s ease; /*引用動畫*/
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.top{
background-color:brown;
transform:rotateX(90deg) translateZ(150px);
}
.bottom{
background-color:blueviolet;
transform:rotateX(-90deg) translateZ(150px);
}
.left{
background-color:blanchedalmond;
transform:rotateY(-90deg) translateZ(150px);
}
.right{
background-color:cadetblue;
transform:rotateY(90deg) translateZ(150px);
}
.after{
background-color:chocolate;
transform:rotateY(180deg) translateZ(150px);
}
.before{
background-color:cyan;
transform:rotateY(0deg) translateZ(150px);
}
@keyframes fram1{ /*動畫旋轉X軸與Y軸*/
0%,100%{
transform: rotateY(0deg) rotateX(0deg);
}
50%{
transform: rotateY(180deg) rotateX(180deg);
}
}
</style>
</head>
<body> <!--加入文字讓視覺更加清晰-->
<div class="top">1</div>
<div class="bottom">2</div>
<div class="left">3</div>
<div class="right">4</div>
<div class="after">5</div>
<div class="before">6</div>
</body>
</html>好了全部代碼都在這了，我已經帶著你做完了，如果你想做一個3d相冊的話,直接給div加上背景圖就好background-color替換為background-image
五、總結
讓我們講講細節吧!當讓這也是最終要的，希望你看到。拼接的過程你們只看到了代碼，首先我們制作了六個width:300px與height:300px的div，我們通過position:absolute讓他們疊加在了一起，你只需要記住絕對定位會讓層級重疊就好了z-inde:可以控制他的層級，好了到最重要的地方了， transform:rotateX(90deg) translateZ(150px);這里為什么我是先旋轉在偏移呢?
總之一句話就是，你右轉在向前進 和 你前進在右轉你到達的位置是不一樣的
就是這個原理。如果你明白了就算是入門了3d還有很多好玩的。等待你慢慢的摸索。
以上是“css如何實現3d立體魔方”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
