3D转换_3d模型转化成函数的方法-CSDN博客

3D转换transform

一、认识3D转换

x轴：水平向右注意：x右边是正值，左边是负值。
y轴：垂直向下注意：y下面是负值，上面是正值
z轴：垂直屏幕注意：往外面的正值，往里面的负值（物体越大z值越大）
perspective 透视：眼睛到屏幕的距离
（近大远小）注意：1.写到被观察元素的父盒子上面 透视值越小看到的物体越大更立体。
语法：transform:translate3d（x,y,z) ；perspective：px

二、3D旋转

1、transform:rotateX()
2、左手准则：大拇指x轴的正方向，沿着x轴旋转的方向就是四根手指往里翻转的方向
transform:rotateY()
3、左手准则：大拇指y轴的正方向，沿着y轴旋转的方向就是四根手指往里翻转的方向
transform:rotateZ()
看不出明显效果

transform:roate3d(x,y,z,deg):沿着定义轴旋转 deg：角度

三、呈现transform-style

呈现3d效果： transform-style: preserve-3d;


        body{
            perspective: 600px;
        }
      .box{position: relative;
          width: 200px;
          height: 200px;
          margin: 300px auto;
          transition: all 3s;
          /*呈现3d效果*/
          transform-style: preserve-3d;
      }
      .box div{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color:black
      }
        .box div:last-child{
            background-color:#FF009DFF;
            transform:rotateX(88.9deg) ;
        }
     .box:hover{
         transform:rotateY(60deg);
     }
    </style>


</head>
<body>
<div class="box">
    <div ></div>
    <div></div>
</div>
</body>