CSS 3D transform

CSS 3D transform_第1张图片
3d_axes.png

必不可少的perspective属性

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的,也就是是2D transform还是3D transform. 这不难理解,没有透视,不成3D.

CSS 3D transform_第2张图片
toushi.png

不过CSS3 3D transform中的透视的透视点与上面的示例图是不同的:CSS3 3D transform的透视点是在浏览器的前方

显示器中3D效果元素的透视点在显示器的上方(不是后面),近似就是我们眼睛所在方位!

CSS 3D transform_第3张图片
3d-distance.jpg

translateZ帮你寻找透视位置

如果说rotateX/rotateY/rotateZ可以帮助理解三维坐标,则translateZ则可以帮你理解透视位置。
我们都知道近大远小的道理,对于没有rotateX以及rotateY的元素,translateZ的功能就是让元素在自己的眼前或近或远

比方说,我们设置元素perspective为201像素,如下:
perspective: 201px;
则其子元素,设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);translateZ值越大,该元素也会越来越大,当translateZ值非常接近201像素,但是不超过201像素的时候(如200像素),该元素的大小就会撑满整个屏幕(如果父辈元素没有类似overflow:hidden的限制的话)。因为这个时候,子元素正好移到了你的眼睛前面,所谓“一叶蔽目,不见泰山”,就是这么回事。当translateZ值再变大,超过201像素的时候,该元素看不见了——这很好理解:我们是看不见眼睛后面的东西的!

perspective属性的两种写法

  • html:
  • css
.container{
  display: block;
  width: 200px;
  height: 200px;
  margin-bottom: 50px;
  border: 1px solid #bbb;
}

.box{
  width: 100%;
  height: 100%;
  opacity: .75;
}

**写法1(子元素设定视角)
.dark-red .box{
   background-color: darkred;
  transform: perspective(600px) rotateY(45deg);
}

**写法2(父元素设定视角)
.dark-blue{
  perspective:600px;
}

.dark-blue .box {
  background-color: darkblue;
  transform: rotateY(-45deg);
}

具体Demo地址:https://jsfiddle.net/codeice/rLc1jg88/

上面的demo上下两个效果之所以会一样,是因为舞台上只有一个元素,因此,发生了巧合,其正好表现一样了。如果,如果舞台上有很多个元素,则两种书写形式的表现差异就会立马显示出来了!

如图:


CSS 3D transform_第4张图片
透视元素不同的差异.png

图1:以父容器为透视元素
因此,显然,我们看到的每个子元素的形体都是不一样的

图2: 每个元素都有自己的一个视点,因此,显然,因为rotateY的角度是一样的,因此,看上去的效果也就一模一样了!

perspective-origin: x-position y-position;

perspective-origin这个属性其实就是好表示你那双眼睛所看的位置。默认就是所看舞台或元素的中心。有时候,我们对中心的位置是不感兴趣的,希望视线放在其他一些地方。

transform-style:preserve-3d

transform-style属性也是3D效果中经常使用的,其两个参数,flat|preserve-3d. 前者flat为默认值,表示平面的;后者preserve-3d表示3D透视(标明其子元素会被定位在这3d空间内)

backface-visibility:visible/hidden;

Hide the backside of a rotated

element:
隐藏或显示旋转元素背后的元素

你可能感兴趣的:(CSS 3D transform)