CSS3-3d转换+示例旋转木马
css3提供了3D转换功能。允许使用3D转换来对元素进行格式化
transform:rotateX(360deg); //X轴旋转360
transform:rotateY(360deg); //Y轴旋转360
transform:rotateZ(360deg); //Z轴旋转360
transform:scale3d(2,2,1);//x,y,z放大2,2,1
transform:translate3d(30px,30px,30px);//各方向平移30px;
matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) ;//矩阵变换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>7.3D转换</title> <style> .flex-box{ display: flex; margin-top: 100px; } .flex-item{ margin-left: 30px; } .div { width:100px; height:75px; background-color:red; border:1px solid black; word-break:break-all; } #div { background-color:yellow; color:#333; font-weight:bold } .div { -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; cursor:pointer; } #div:hover{ /* RotateX div */ transform:rotateX(360deg); -ms-transform:rotateX(360deg); /* IE 9 */ -webkit-transform:rotateX(360deg); /* Safari and Chrome */ } /*translate------位移 值(50px;100px)从左边元素位移50个像素，并从顶部位移100px */ #div2:hover { transform:rotateY(360deg); -ms-transform:rotateY(360deg); /* IE 9 */ -webkit-transform:rotateY(360deg); /* Safari and Chrome */ } #div3 { height: 100px; background-color: yellow; border: 1px solid black; } #div3:hover{ transform:rotateZ(360deg); -ms-transform:rotateZ(360deg); /* IE 9 */ -webkit-transform:rotateZ(360deg); /* Safari and Chrome */ } #div4:hover { transform:scale3d(2,2,1); -ms-transform:scale3d(2,2,1); /* IE 9 */ -webkit-transform:scale3d(2,2,1); /* Safari and Chrome */ } #div5:hover { transform:translate3d(30px,30px,30px); -ms-transform:translate3d(30px,30px,30px);/* IE 9 */ -webkit-transform:translate3d(30px,30px,30px); /* Safari and Chrome */ } #div6 { position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; perspective:150; -webkit-perspective:150; /* Safari and Chrome */ } #div7{ padding:50px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); /* Safari and Chrome */ } </style> </head> <body> <div class="flex-box"> <div class="flex-item"> <div class="div" id="div"><p style="text-align:center;">Hello,X轴旋转360度</p></div> </div> <div class="flex-item"> <div class="div" id="div2">Hello. Y轴旋转360度</div> </div> <div class="flex-item"> <div class="div" id="div3"> Hello. Z轴旋转360度 </div> </div> <div class="flex-item"> <div class="div" id="div4">Hello.放大2,2,1</div> </div> <div class="flex-item"> <div class="div" id="div5" >Hello.位移30px,30px,30px</div> </div> <div class="flex-item"> <div id="div6"><div id="div7">HELLO</div></div> </div> </div> </body> </html>
3D转换的示例，旋转木马预览图片
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7-3D旋转木马</title> <style> *{ padding:0; margin:0; } #view{ position: relative; top:200px; left:300px; width: 200px; height: 150px; /*加一个视距*/ perspective: 1000px; } #view1{ position: relative; top:200px; left:900px; width: 200px; height: 150px; /*加一个视距*/ perspective: 1500px; } #contain,#contain1{ position: absolute; width: 100%; height: 100%; /*加个3D视图声明*/ transform-style:preserve-3d; /*动画两秒*/ transition:transform 2s; } #contain figure,#contain1 figure{ position: absolute; width: 178px; height: 128px; display: block; } #contain figure img,#contain1 figure img{ width: 158px; height: 118px; position: absolute; top:10px; left: 10px; } #contain figure:nth-child(1){ transform:rotateY(0deg) translateZ(245px); } #contain figure:nth-child(2){ transform:rotateY(40deg) translateZ(245px); } #contain figure:nth-child(3){ transform:rotateY(80deg) translateZ(245px); } #contain figure:nth-child(4){ transform:rotateY(120deg) translateZ(245px); } #contain figure:nth-child(5){ transform:rotateY(160deg) translateZ(245px); } #contain figure:nth-child(6){ transform:rotateY(200deg) translateZ(245px); } #contain figure:nth-child(7){ transform:rotateY(240deg) translateZ(245px); } #contain figure:nth-child(8){ transform:rotateY(280deg) translateZ(245px); } #contain figure:nth-child(9){ transform:rotateY(320deg) translateZ(245px); } /*九张图片，所以每张图片围绕Y轴旋转40度，然后让每个figure都离中心位置245px，245这个数字 是根据图片的宽度来的，具体算法是--图片宽度除以2，再除以tan(20),自己可以画张多边形研究一下*/ #contain1 figure:nth-child(1){ transform:rotateX(0deg) translateZ(245px); } #contain1 figure:nth-child(2){ transform:rotateX(40deg) translateZ(245px); } #contain1 figure:nth-child(3){ transform:rotateX(80deg) translateZ(245px); } #contain1 figure:nth-child(4){ transform:rotateX(120deg) translateZ(245px); } #contain1 figure:nth-child(5){ transform:rotateX(160deg) translateZ(245px); } #contain1 figure:nth-child(6){ transform:rotateX(200deg) translateZ(245px); } #contain1 figure:nth-child(7){ transform:rotateX(240deg) translateZ(245px); } #contain1 figure:nth-child(8){ transform:rotateX(280deg) translateZ(245px); } #contain1 figure:nth-child(9){ transform:rotateX(320deg) translateZ(245px); } /*第二种旋转木马效果就是让图片围绕X轴旋转40度*/ #button{ width: 200px; position: relative; top:100px; left: 400px; text-align: center; } #previous,#next{ padding:5px; font-size: 16px; background: #98f898; } </style> </head> <body> <div id="view"> <div id="contain"> <figure><img src="images/1.jpg"></figure> <figure><img src="images/2.jpg"></figure> <figure><img src="images/3.jpg"></figure> <figure><img src="images/4.jpg"></figure> <figure><img src="images/5.jpg"></figure> <figure><img src="images/6.jpg"></figure> <figure><img src="images/7.jpg"></figure> <figure><img src="images/8.jpg"></figure> <figure><img src="images/9.jpg"></figure> </div> </div> <div id="view1"> <div id="contain1"> <figure><img src="images/1.jpg"></figure> <figure><img src="images/2.jpg"></figure> <figure><img src="images/3.jpg"></figure> <figure><img src="images/4.jpg"></figure> <figure><img src="images/5.jpg"></figure> <figure><img src="images/6.jpg"></figure> <figure><img src="images/7.jpg"></figure> <figure><img src="images/8.jpg"></figure> <figure><img src="images/9.jpg"></figure> </div> </div> <div id="button"> <button id="previous">上一张</button> <button id="next">下一张</button> </div> <script> //获得图片偏移中心距离的算法 // $(function(){ // var num=$("#contain figure").length;//图片数量 // var w=$("#contain").width();//图片宽度 // var deg_n=Math.floor(360/num);//图片需要旋转的角度,用角度的一半可以算出图片离中心的距离 // var true_w=w/(2*Math.tan(deg_n/360*Math.PI));//需要把角度转换为弧度角 deg_n/2*2*Math.PI/360; // alert(Math.round(true_w)); // }) //jquery 方法 // $(function(){ // $("#contain figure").css("opacity","1") // var n=0; // var total=0; // $("#next").click(function(){ // n++; // total=n*40; // $("#contain").css("transform","rotateY("+(-total)+"deg)"); // $("#contain1").css("transform","rotateX("+(-total)+"deg)"); // }) // $("#previous").click(function(){ // n--; // total=n*40; // $("#contain").css("transform","rotateY("+(-total)+"deg)"); // $("#contain1").css("transform","rotateX("+(-total)+"deg)"); // }) // }) //原生JS方法 var figure=document.getElementsByTagName('figure'); var contain=document.getElementById('contain'); var contain1=document.getElementById('contain1'); var previous=document.getElementById('previous'); var next=document.getElementById('next'); var n=0,total=0; next.addEventListener('click',function(){ n++; total=n*40; contain.style.transform="rotateY("+(-total)+"deg)"; contain1.style.transform="rotateX("+(-total)+"deg)"; },false); previous.addEventListener('click',function(){ n--; total=n*40; contain.style.transform="rotateY("+(-total)+"deg)"; contain1.style.transform="rotateX("+(-total)+"deg)"; },false); </script> </body> </html>
