3D变换-transform属性

  1. perspective（透视距离）
  2. transform-style（是否为3d模型）
  3. translate3d(x,y,z)（位置偏移）
  4. scale3d(x,y,z)（缩放）
  5. rotate3d(x,y,z,angle)（角度）
  6. perspective-origin()（视角）
  7. 灭点

perspectivey(一般为800px-1000px)

CSS3中透视perspective
透视原理： 近大远小 。
浏览器透视：把近大远小的所有图像，透视在屏幕上。1.
理解浏览器的坐标系：浏览器平面为 Z=0的平面，坐标原点默认为图片的中心，可以通过更改透视原点进行更改。
2.perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。
3.perspectiveOrigin: 个人理解为视点的xy坐标，perspective则是z坐标，三者可以再三维中确定 视点的唯一位置。
4.值越小，元素离视图越近效果越明显，值越大物体远，透视效果不明显。
5.3d变换的元素一定要在外面套一个父元素，在父元素设置perspective 6.也可以给袁素本身设置transfrom:perspective(300px)
5和6的区别是给父元素：子元素有共同的视角。给子元素：各自子元素都是自己的视角。

transform-style

  1. 指定在父元素3D变换时，子元素如何在3D空间中呈现，
  2. 可选项：preserve-3D | flat (2d效果，默认)
  3. 需要设置在3D变换的父元素中，并且高于任何嵌套的变形元素。
  4. 如果你的父元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden;

transform-origin

  1. transform-origin : x轴 y轴 z轴;
    注意：Z轴只能设置为像素值，不能用关键字
  1.  <style>
  2.     .outer {
  3.         perspective:1000px;
  4.     }
  5.     .box {
  6.         border:1px solid black;
  7.         padding:100px;
  8.         width:300px;
  9.         height:300px;
  10.         margin:100px auto;
  11.         background:gray;
  13.     }
  14.     .box .inner{               
  15.         background-color:orange;
  16.         width:300px;
  17.         height:300px;
  18.         transition:all 3s;
  19.          transform-origin:0 0 50px;
  20.      }
  21.     .box:hover .inner {
  22.         transform: rotateY(360deg);
  23.     }
  24.     </style>
  1. <body>
  2.     <div class="outer">
  3.         <div class="box">
  4.             <div class="inner">
  5.             </div>
  6.         </div>
  7.     </div>
  8. </body>

定义灭点位置(即视线消失的位置）

  1. 语法：perspective-origin : x轴 y轴;
  2. 作用：改变视图角度（可理解为视线的方向），影响三维效果呈现。
  3. 坐标为当前元素的原点。和perspective结合使用。

backface-visibility：

1语法：backface-visibility: visible | hidden;

2作用：定义元素在不面对屏幕时是否可见
backface-visibility定义元素在不面对屏幕时是否可见
默认值：visible可见
hidden不可见