旋转方向.png

1.3D 相关的属性

  • perspective 属性定义 3D 元素距视图的距离，以像素计。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
  • 子元素保留3d转换位置，添加给父元素 transform-style:preserve-3d;

  • 元素背面不可见 backface-visibility: hidden;

    2.位移

  • transform:translateZ(); 沿Z轴方向移动

  • transform:translate3d(100px,200px,200px); XYZ三个轴共同作用

  • transform:translateX(100px) translateY(200px) translateZ(200px); 等同上面效果

    3.旋转

  • transform:rotateX(45deg); 绕X轴旋转

  • transform:rotateY(); 绕Y轴旋转
  • transform:rotateZ(); 绕Z轴旋转
  • transform:rotate3d(x,y,z,45deg); xyz代表矢量方向

2021-11-16_105334.jpg

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .wrap {
  10.             width: 300px;
  11.             height: 300px;
  12.             margin: 200px auto 0;
  13.             position: relative;
  14.             transform-style: preserve-3d;
  15.             /* perspective: 2000px; */
  16.             transform: rotateX(-20deg) rotateY(-20deg);
  17.         }
  18.         .wrap div {
  19.             width: 300px;
  20.             height: 300px;
  21.             background: rgba(166, 166, 166, 0.5);
  22.             text-align: center;
  23.             line-height: 300px;
  24.             font-size: 100px;
  25.             color: #fff;
  26.             position: absolute;
  27.             top: 0;
  28.             left: 0;
  29.             border: 1px solid red;
  30.         }
  31.         .box1 {
  32.             transform:translateZ(150px);
  33.         }
  34.         .box2 {
  35.             transform:rotateY(180deg) translateZ(150px);
  36.         }
  37.         .box3 {
  38.             transform:rotateX(90deg) translateZ(150px);
  39.         }
  40.         .box4 {
  41.             transform:rotateX(-90deg) translateZ(150px);
  42.         }
  43.         .box5 {
  44.             transform:rotateY(-90deg) translateZ(150px);
  45.         }
  46.         .box6 {
  47.             transform:rotateY(90deg) translateZ(150px);
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <div class="wrap">
  53.         <div class="box1">前</div>
  54.         <div class="box2">后</div>
  55.         <div class="box3">上</div>
  56.         <div class="box4">下</div>
  57.         <div class="box5">左</div>
  58.         <div class="box6">右</div>
  59.     </div>
  60. </body>
  61. </html>

4.缩放

  • transform:scaleZ(); Z轴缩放，需要在立方体上演示才有效果
  • transform:scale3d(x,y,z); XYZ轴共同缩放

作业2.jpg