css 3D

技术分享

今天给大家分享一下 ，如何用css做简单的3d效果，首先我们要有以下知识储备

基础知识储备

3D坐标系

我们先来看看这个图片，xyz轴组成了css的3D坐标系，从图片看出一共有6个方向，而所有3D的变换都基于这个坐标系

3D Transform的方法

3D变换的方法主要是rotate3d旋转, translate3d平移, scale3d缩放三大部分，想具体了解的可以之后点击文档的这个链接，我们来主要讲讲以下几个属性
rotateX, rotateY, rotateZ,translateZ，...

rotateX：单杠选手

rotateY：钢管舞选手

rotateZ：摩天轮选手

效果演示

transform-style

设置元素的子元素是位于 3D 空间中还是平面中
flat【默认值】,preserve-3d
效果演示

transform-origin

元素变形的原点
参数：x偏移量，y偏移量，z偏移量[必须是具体数字]
默认值： center

效果演示

一个简单的立方体

好，此时我们就可以利用刚刚学到的知识来做一个简单的立方体了，大家可以想象一下，立方体一共有6个面，每个面应该怎么平移和旋转

演示代码

perspective 透视

通过立方体，我们理解了css中三维的概念，接下来我们来了解一下css 3D中一个重要的概念

perspective指定了观察者与 z=0 平面的距离【未经变换的z=0】，使具有三维位置变换的元素产生透视效果

上图里的Z就是Z轴的值。Z轴如果是正数的离屏幕更近，如果是负数离屏幕更远。而Z轴的远近和translateZ分不开,我们来回顾一下刚刚讲的translateZ
效果演示
translateZ实现了CSS3D空间的近大远小。

现在回到刚刚的立方体，我们通过perspective的改变可以让立方体离我们更近或者更远，此时由于增加了透视，我们已经不需要通过立方体的transform来体现3d效果了
代码演示

perspective-origin

perspective-origin 指定了观察者的位置，默认值center

x position:
left = 0%
center = 50%
right = 100%

y position
top = 0%
center = 50%
bottom = 50%

效果演示

backface-visibility

visible | hidden
指定当元素背面朝向观察者时是否可见
代码演示

结构总结

HTML结构，如下：

舞台
    容器1【舞台元素】
        ...
    容器2【舞台元素】

• 对于舞台，加个视距，也可以在此加入观察者位置：
  perspective: 800px;
• 对于容器【舞台元素】，加个3D视图声明，也可以在此加入观察者位置与动画：
  transform-style: preserve-3d;

不同的观察者位置的添加，也会有不同的效果
代码演示

实际使用

全景空间

旋转木马轮播图

开门效果