3d转换+示例旋转木马

Posted 2020-08-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于3d转换+示例旋转木马的主要内容，如果未能解决你的问题，请参考以下文章

初学制作3D旋转木马

案例-3D旋转木马

scss Matrix特色活动自定义3D旋转木马

AS3中的3d Polkadot旋转木马

手机端3d旋转木马效果+保存图片到本地