1. 1.3d 和2d不同点是多了一个z轴,2d都是一些平移效果，3d可以让它按照轴为中心旋转
  2. 2.为了增加空间想象多了一个左手法则
  3. 解释：伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向
  4. 前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、
  5. Y、Z轴的正方向。如下图
  • 方向判断的口诀
  1. x左边是负的，右边是正的
  2. y上面是负的， 下面是正的
  3. z里面是负的， 外面是正的

25 transform3d变形 - 图1

rotateX()

  1. 1.就是沿着 x 立体旋转.例如transform:rotateX(180deg);旋转时候也是图片中
  2. 心为轴旋转

rotateY()

  1. 1.就是沿着 y 立体旋转.例如transform:rotateY(180deg);旋转时候也是图片中
  2. 心为轴旋转

rotateZ()

  1. 1.就是沿着 z 立体旋转.例如transform:rotateZ(180deg);旋转时候也是图片中
  2. 心为轴旋转

移动 translateX(x)/translateY(y)/translateZ(z)

  1. 1.3d比2d 移动多了一个 translateZ(z)
  2. 2.[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本
  3. 身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
  4. 3.简写：translate3d(x,y,z)

透视 — perspective

  1. 1.电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
  2. 2.透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
  3. - 透视原理： 近大远小 。
  4. - 浏览器透视：把近大远小的所有图像，透视在屏幕上。
  5. - perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
  6. 3.并非任何情况下需要透视效果，根据开发需要进行设置。
  7. 4.perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

使用透视案例

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body {
  8.             perspective: 1000px;  /*视距 距离 眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显*/
  9.         }
  10.         img {
  11.             display: block;
  12.             margin: 100px auto;
  13.             transition: all 1s;
  14.         }
  15.         img:hover {
  16.             transform: rotateX(360deg);
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <img src="images/x.jpg" alt=""/>
  22. </body>
  23. </html>

元素不面向屏幕时是否可见 — backface-visibility

1.backface-visibility 属性定义当元素不面向屏幕时是否可见。

反转盒子案例

div {
            width: 224px;
            height: 224px;
            margin: 100px auto;
            position: relative;
        }
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s; 
        }
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden; /* 不是正面对象屏幕，就隐藏 */
        }
        div:hover img {
            transform: rotateY(180deg);
}

案例

1570286906545-888bf5ca-a6ab-4335-83ca-3e8f45ecb5e6.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background: url('http://pic22.nipic.com/20120725/9676681_001949824394_2.jpg') no-repeat;
            background-size: cover;
            position: relative;
            perspective: 1000px;  /*给父盒子添加透视效果 一定要加透视效果*/
        }
        .ldoor,.rdoor{
            position: absolute;
            background-color: red;
            border:1px solid #000;
            top:0;
            width: 250px;
            height: 500px;
        }
        .ldoor{
            transform-origin: left;/*旋转轴*/
            left: 0;
        }
        .rdoor{
            transform-origin: right;/*旋转轴*/
            right: 0;
        }
        /*鼠标经过section 盒子 两个门盒子 翻转 rotateY*/
        section:hover .ldoor {
            transform: rotateY(-130deg);  /*因为往左边翻转，所以是负值*/
        }
        section:hover .rdoor {
            transform: rotateY(130deg);
        }
    </style>
</head>
<body>
<section>
    <div class="ldoor"></div>
    <div class="rdoor"></div>
</section>
</body>
</html>