CSS3 2D & 3D 用法简介

CSS3 2D & 3D 用法简介

2D转换方法

• translate()
• rotate()
• scale()
• skew()
• matrix()
• transfomr-origin
  transform: translate(x, y) 指定当前元素根据规定的left top来定位
  transform: translateX(n) 指定当前元素沿着X轴移动
  transform: translateY(n) 指定当前元素沿着Y轴移动
  transform: rotate(angle) 旋转：顺时针旋转给定的角度，负数表示逆时针
  transform: scale(X, Y) 缩放： 当前元素根据给定的宽度，高度缩放
  transform: scaleX(n) 改变元素的宽度
  transform: scaleY(n) 改变元素的高度
  transform: skew(X-angle, Y-angle) 翻转： 根据给定的水平和垂直的参数，翻转一定的角度
  transform: skewX(X-angle) 当前元素沿着X轴翻转给定角度
  transform: skewY(Y-angle) 当前元素沿着Y轴翻转给定角度
  transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点`
  2D效果图：
  

3D转化方法

首先需要了解几个css3的几个属性：

• rotateX ( angle ) 绕X轴旋转
• rotateY ( angle ) 绕Y轴旋转
• rotateZ ( angle ) 绕Z轴旋转
  
  perspective 这个属性看了文档也不太清楚什么含义，于是度娘上搜刮了下：
  我们知道图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
  度娘说balbalbala…透视分为一点透视，二点透视，三点透视
  一点透视就是只有一个灭点，灭点是什么呢？灭点就是多条延长线的交点
  
• perspective：是一个属性，设置给父元素，作用于所有3D转化的子元素。是用来确定元素透视灭点位置的。
  perspective属性需要与rotateX()，rotateY()，rotateZ()这三个属性配合着用
  perspective 的理解可以分两种情况：

1. 对于没有rotateX()、rotateY()的元素，也就是没有产生灭点的元素，形状没有产生变形，只是遵循近大远小的原则。
   而translateZ的直观表现就是大小变换，实际是XY平面相对于视点的变化，即视距影响元素大小（视点，用于模拟透视效果时人眼的位置
   当translateZ为0时，在Z轴上元素在它本来的位置，也就是说没有相对于我们的眼睛的位置变化，所以既没有变大也没有变小。
   当translateZ为正数时，元素往Z轴正方向（也就是往前）移了，元素大小会随着translateZ的值增大而变大，反之为负数时，元素往Z轴负方向移动，元素大小会随着translateZ的值增大而变变小。
   此场景，perspective的值（视距）代表视点离元素中心的距离，当translateZ的值越大，接近perspective的值时，元素越大，当translateZ的值等于大于perspective的值时，元素就看不见了，因为元素已经跑到眼睛后了。

2. 对于有rotateX() 、 rotateY()的元素，即产生灭点的元素，元素形状发生变形。perspective是用来确定元素透视灭点位置的。
   此场景，perspective的值代表的是视点到灭点的距离，当perspective的值越大时，元素的灭点也远，元素变形越大；当perspective的值越小时，元素的灭点越近，元素变形越大。

perspective属性的两种书法方法：

1. 定义在父元素上。
2. 定义在当前动画元素上，与transform的其他属性写在一起。
   这两种写法呈现的效果是不一样的

html

<section class="inner-perspective">
  <div class="box rotatey">rotate Y</div>
  <div class="box rotatey">rotate Y</div>
  <div class="box rotatey">rotate Y</div>
  <div class="box rotatey">rotate Y</div>
  <div class="box rotatey">rotate Y</div>
  <div class="box rotatey">rotate Y</div>
</section>

<section >
  <div class="box rotatey-out">rotate Y</div>
  <div class="box rotatey-out">rotate Y</div>
  <div class="box rotatey-out">rotate Y</div>
  <div class="box rotatey-out">rotate Y</div>
  <div class="box rotatey-out">rotate Y</div>
  <div class="box rotatey-out">rotate Y</div>
</section>

css

section {
  display: flex;
  flex-wrap: wrap;
}
.inner-perspective {
  perspective: 500px;
}
.box {
  width: 100px;
  height:100px;
  margin: 15px;
  background: green;
  color: white;
}
.rotatey {
  transform:  rotateY(45deg);
}
.rotatey-out{
  transform: perspective(500px) rotateY(45deg);
}

效果

效果图第一排：父元素作为透视元素，每个子元素有共同的视点，从共同的视点看每个元素，每个子元素的形状是不一样的。
效果图第二排：每个子元素作为透视元素，这样每个子元素有各自的视点，因为都设置了一样的属性，所以看起来是一样的。

• perspective-origin 功能类似 transform-origin
  改变透视的基线，默认是元素的中心。
• transform-style: preserve-3d 设置内嵌的元素在 3D 空间如何呈现
  flat：所有子元素在 2D 平面呈现。
  preserve-3d：保留3D空间。