好玩！ CSS3 3D transform 体验！

目录

1. preface

2. 明明白白的rotate(X|Y|Z)变换

3. 不可或缺的perspective

4. 舒舒服服的translateZ

5. 鬼鬼祟祟的perspective-origin

6. 进阶的transform-style: preserve-3d

7. 补充亿点细节backface-visibility

8. 实际应用

9. 结语

10. 引用文章

 

1. preface

不识庐山真面目，只缘身在此山中！

依葫芦画瓢，懵懵懂懂。囫囵吞枣，不如深入理解！

本文只求让你摆脱，对于3D图像进行的OFP（面向随缘的编程）。

那让我们开始吧！ 从寻找资料开始(已寻找完成，看本文和引用文章便可)。

 

2. 明明白白的rotate(X|Y|Z)变换

我上看下看左看右看原来每个角度都不简单~我们先从人类的视角看这张图，作为身处三维空间的人，我们只需要三张图片来映射对照一下，就能轻松理解这张图的含义~

以Y为轴做旋转

以Y为轴做旋转

以Z为轴做旋转

所以 3D transform 作为人类创造的方法，自然也遵循这一物理规则！

三种方法(同为顺时针旋转为正角度)：

• rotateX( angle )
• rotateY( angle )
• rotateZ( angle )

 

从以上三张图我们有了思路：

1. 让其以单杠作为轴做旋转动作，便是rotateX(angle)
2. 让其芭蕾舞者以脚尖垂直于地面连成一条线为轴，做旋转动作，便是rotateY(angle)
3. 以人视野垂看向主体中心的视线作为轴武术家的侧空翻就是rotateZ(angle)

 

用实际的代码来测试一下效果：

  <div class="per-orgin">
    <div class="rotatex box">
        以X为轴，旋转60°
    </div>
      <div class="rotatey box">
        以Y为轴，旋转60°
    </div>
      <div class="rotatez box">
        以Z为轴，旋转60°
    </div>
   </div>

.per-orgin{
  perspective: 600px;
}
.box{
    
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 20px 30px;
  float: left;
  color: black;
  text-align: center;
  line-height: 200px;
}
.rotatex{
  transform: rotateX(45deg);
}
.rotatey{
  transform: rotateY(45deg);
}
.rotatez{
  transform: rotateZ(45deg);
}

3.  不可或缺的perspective (视角，透视图)

天空飘来八个字儿~

没有透视，不成3D

小学二年级我们就学过如何绘制透视图，所以理解上这并难不倒我们！

透视图1

透视图2

 但！

CSS3 3D transform中的透视的透视点与上面两张示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方(近似眼睛所在位置)！

所以遵循透视规则: 近大远小，近高远低

注：perspective也是数值越小，图像越大。数值越大，图像越小。

若我们设置

perspective: 2000px;

则，出现下图一致效果(物理后移距离屏幕2000px)。

辅助理解

4. 舒舒服服的translateZ

一叶蔽目，不见泰山

rotate(X|Y|Z) 可学习利用三维坐标，那么translateZ则能完成“调焦”之能。

translateZ的作用可让元素在自己的视野内或远或近(数值越小，图像越小。数值越大，图像越大。)

/* preset：*/
perspective: 200px;

此时translateZ 值逼近200px 时，元素大小会盛满屏幕，当大于perspective值时，我们是看不见的。因为：人是看不见眼睛后面的东西的

 

5. 鬼鬼祟祟的perspective-origin

通过前面的学习，我们发现，视点是固定的，它一直在元素的中心。

但!  横看成峰侧成岭,远近高低各不同。

我们希望更多更多的把玩3d图像，这就自然引申出了接下来的内容perspective-origin

/* 语法 */

/* One-value syntax */
perspective-origin: x-position;

/* Two-value syntax */
perspective-origin: x-position y-position;

/* When both x-position and y-position are keywords,
   the following is also valid */
perspective-origin: y-position x-position;

/* Global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: unset;

/* Value */
x-position
指定消失点的横坐标，其值有以下形式：
<length-percentage> 长度值或相对于元素宽度的百分比值，可为负值。
left, 关键字，0值的简记。
center, 关键字，50%的简记。
right, 关键字，100%的简记。
y-position
指定消失点的纵坐标，其值有以下形式：
<length-percentage> 长度值或相对于元素高度的百分比值，可为负值。
top, 关键字，0值的简记。
center, 关键字，50%的简记。
bottom, 关键字，100%的简记。

无他，为手熟而。 希望抽象了解这一知识点可以移步好吧，CSS3 3D transform变换，不过如此！_张鑫旭文章的第七小节。(你会回来感谢我的？)

6. 进阶的transform-style: preserve-3d

transform-style: flat | preserve-3d;
/*
    flat: 默认值，表示平面。
    preserve-3d: 表示3d透视。
*/

对！ preserve-3d是更符合我们认知的。纸片人终归还是纸片人。

因此，我们在实现更真是的3d环境时，便会使用transform-style: preserve-3d;。 一般来说这个声明 应用在比3d变换图像的父元素上。

 

7. 补充亿点细节backface-visibility

真实场景：我们无法看到墙后的世界。

CSS场景：默认情况可以透过元素看到其背后的内容。

为了符合实际，便:

backface-visibility:hidden;

8. 实际应用

案例笔者会更新到github上...

[未完待续]

9. 结语

你如同一个造物主，对元素任意搓揉。揉好了便是女娲造人，否之则小朋友捏橡皮泥，捏出一个四不像。

CSS 3d 上的知识点说简单也简单，说麻烦也麻烦，但谈不上难。

同学们若笔者有那个地方说错的或有啥好的应用场景，希望不吝笔墨，互相讨论。

10. 引用

好吧，CSS3 3D transform变换，不过如此！

CSS3系列之3D制作

CSS3-3D制作案例分析实战

perspective-origin