css3 3d學習心得
首先我們要學習好css3 3d一定要有一定的立體感
通過這個圖片應該清楚的了解到了x軸 y軸 z軸是什么概念了。
首先先給大家看一個小例子：
卡片反轉
這個例子只是簡單的純css3 3d 關於y軸旋轉 下面是代碼：
這是HTML：
<body style="background-color:#23d19d">
<div id="box">
<div class="bian zhi1"><img src="imags/kpxz1.jpg" alt=""></div>
<div class="bian zhi2"><img src="imags/kpxz2.jpg" alt=""></div>
</div>
</body>
這是css：
body{
perspective: 800px;
transform-style: preserve-3d;
}
#box{
width: 300px;
height: 300px;
margin: 0 auto;
transform-style: preserve-3d;
position: relative;//相對body定位
transition: 2s;//運動時間
}
#box:hover{
transform:rotateY(180deg);//當鼠標移動到上面時讓他旋轉180°
}
#box .bian{
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 100px;
position: absolute; //.mian相對與#box絕對定位
}
.zhi1{
background-color: red;
transform:rotateY(180deg);
}
.zhi2{
background-color: yellow;
backface-visibility: hidden;//設置后面的可適度為看不見
}
精彩的代碼已經看完了那就聊聊原理吧！
css3 3d 顧名思義是由兩個2d名片組成的 但不是讓你建立連個2d啊！
一個div要想又3d效果那就得在最外層建立一個3d平面.
transform-style: preserve-3d; 3d空間
perspective: 800px; 它被成為視距或者緊身.
但是要是相對與body是不是也得給div上一層也得加一個緊身呢！
有了3d效果是不是的有一個像眼鏡一樣的東西呢 在不同的地方顯示的效果也是不一樣的
perspective-origin:50% 50%; 這就是你的眼鏡啦 位置不同效果也就不用了
這樣我們的3d空間就已經建立成了。
3d無非就是通過X Y Z軸來進行操作
rotateX/rotateY/rotateZ可以幫助理解三維坐標
translateZ則可以幫你理解透視位置。
transform-origin我們成為基點 在水平方向改變觀看div的位置
scale 縮放 rotate 旋轉 translate移動 skew傾斜 通過這些來進行3d效果
我相信大家已經初步了解了css3 3d了
魔方
那現在我們再來看一個例子吧！
這是一個正方體也是純css3 來編寫的
首先先讓六個面全部疊加在一起 通過自己對3d空間的理解 和 x y z 軸的移動來拼接這個立方體
這是HTML：
<body style="background-color:#23d19d">
<div id="box">
<div class="mofang_box"id="mofang_box">
<div class="mofang qian"><img src="imags/1.jpg"></div>
<div class="mofang hou"><img src="imags/2.jpg"></div>
<div class="mofang left"><img src="imags/3.jpg"></div>
<div class="mofang right"><img src="imags/4.jpg"></div>
<div class="mofang top"><img src="imags/5.jpg"></div>
<div class="mofang buttom"><img src="imags/6.jpg"></div>
</div>
</div>
<script type="text/javascript"src="js/index02.js"></script>
</body>
這是css：
img{
width: 200px;
height: 200px;
}
#box{
perspective: 800px;
transform-style: preserve-3d;
transition: 5s infinite;
transform:rotateX(0deg) rotateY(0deg);
}
.mofang_box{
width: 200px;
height: 200px;
margin: 100PX auto;
position: relative;
transform-style: preserve-3d;
transition: 50s;
transform:rotateX(0deg)rotateY(0deg);
}
.mofang_box:hover{
transform:rotateX(3600deg)rotateY(3600deg);
}
.mofang{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
position: absolute;
}
//原來這六個面的div是疊加在一起的通過旋轉 移動來讓他們形成正方體
.left{
transform:rotateY(90deg)translateZ(-100px);
}
.right{
transform:rotateY(90deg)translateZ(100px);
}
.top{
transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
}
.buttom{
transform:rotateX(90deg)translateZ(-100px)rotateZ(180deg);
}
.hou{
transform:rotateX(0deg)translateZ(-100px)rotateZ(180deg);
}
.qian{
transform:rotateX(0deg)translateZ(100px);
}
這個例子就不多說了 下面這個是非常炫 而且經常用的banner圖：
banner圖
這個案例簡單的說就是前面做的魔方，用5個魔方拼接起來讓他在視覺上成為一體 再給每個魔方設置一個延遲時間 第一個相對第二個延遲 第二個相對第三個延遲 這樣一次類推就會有這樣的效果了
這是最重要的就是圖片的定位 每一個div上顯示的都是圖片的一部分 我們需要來規定它的位置
.wutai:nth-of-type(2)>.mofang{
background-position:-100px 0px;
}
.wutai:nth-of-type(3)>.mofang{
background-position:-200px 0px;
}
.wutai:nth-of-type(4)>.mofang{
background-position:-300px 0px;
}
.wutai:nth-of-type(5)>.mofang{
background-position:-400px 0px;
}
.wutai:nth-of-type(6)>.mofang{
background-position:-500px 0px;
}
他就是規定圖片的位置
這是HTML：
<body style="background-color:#23d19d">
<div id="box"></div>
</body>
這是css;
css里邊有-webkit-都是兼容ie的寫法；
img{
width: 100px;
height: 200px;
}
#box{
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 30% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 5s infinite;
transition: 5s;
margin:100px 415px;
}
.wutai{
width: 100px;
height: 200px;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
float: left;
margin-left: -2px;
}
.mofang{
width: 100px;
height: 200px;
text-align: center;
line-height: 200px;
position: absolute;
}
.left{
width: 200px;
height: 200px;
-webkit-transform:rotateY(90deg)translateZ(-100px);
transform:rotateY(90deg)translateZ(-100px);
background-color: #000;
}
.right{
width: 200px;
height: 200px;
background-color: #000;
-webkit-transform:rotateY(90deg)translateZ(0px);
transform:rotateY(90deg)translateZ(0px);
}
//.wutai:nth-of-type(2)>.mofang這樣的很重要 他是改變圖片大小的
//這個banner是把5個div拼接起來的所以要改變圖片的大小和位置
.wutai:nth-of-type(2)>.mofang{
background-position:-100px 0px;
}
.wutai:nth-of-type(3)>.mofang{
background-position:-200px 0px;
}
.wutai:nth-of-type(4)>.mofang{
background-position:-300px 0px;
}
.wutai:nth-of-type(5)>.mofang{
background-position:-400px 0px;
}
.wutai:nth-of-type(6)>.mofang{
background-position:-500px 0px;
}
.top{
background-image:url(../imags/8.jpg);
-webkit-transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
background-size: 500px 100%;//設置圖片大小為500px
}
.buttom{
background-image:url(../imags/9.jpg);
-webkit-transform:rotateX(90deg)rotateX(180deg)translateZ(100px);
transform:rotateX(90deg)rotateX(180deg)translateZ(100px);
background-size: 500px 100%;//設置圖片大小為500px
}
.hou{
background-image:url(../imags/10.jpg);
-webkit-transform:rotateX(180deg)translateZ(100px);
transform:rotateX(180deg)translateZ(100px);
background-size: 500px 100%;//設置圖片大小為500px
}
.qian{
background-image:url(../imags/11.jpg);
-webkit-transform:rotateX(0deg)translateZ(100px);
transform:rotateX(0deg)translateZ(100px);
background-size: 500px 100%;//設置圖片大小為500px
}
這是js;
window.onload=function(){
var box=document.getElementById("box");
var wutai =box.getElementsByClassName("wutai");
var gs=5;//遍歷的div
var neirong= '<div class="wutai"><div class="mofang qian"></div><div class="mofang hou"></div><div class="mofang left"></div><div class="mofang right"></div><div class="mofang top"></div><div class="mofang buttom"></div></div>'; //遍歷的HTML
var dom="";
for(var i=0;i<gs;i++){
dom+=neirong;//循環遍歷div的個數
}
box.innerHTML=dom;// 將遍歷的div放入html中
var dian=0;
box.onclick=function(){
dian++;
var jiaodu=dian*90;
for(var i=0;i<gs;i++){
wutai[i].style="transition:transform 1s"+100*i+"ms;transform:rotateX("+jiaodu+"deg)";//設置延遲時間和旋轉的度數
}
}
setInterval(function(){
dian++;
var jiaodu=dian*90;
for(var i=0;i<gs;i++){
wutai[i].style="transition:transform 1s"+100*i+"ms;transform:rotateX("+jiaodu+"deg)";
}
},3000)//設置計時器讓dome自己運動起來
}
最后給大家一個總結吧！
3d世界中的各種有規律的運動效果都可以使用CSS3 transform 3D方法實現我們怎么想就怎么做 3d的世界非常奇妙也非常神奇
作者：常樂