HTML/CSS[29天] 再探CSS3D

0

[29天] 再探CSS3D

CSS3D transform perspective 阅读:31 时间:2022年06月14日

第29天了,不知道再写些什么了。就再复习复习CSS 3D吧。了解下基本的3D概念,就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上。其余的手指指向前方,这样就建立了一个左手坐标系。其中,拇指、食...

前言

第29天了,不知道再写些什么了。就再复习复习CSS 3D吧。

了解下基本的3D概念,就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系

伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上。其余的手指指向前方,这样就建立了一个左手坐标系。其中,拇指、食指和其余手指分别代表x,y,z轴的正方向

以上关于WEB 3D说明来自我整理ThreeJS时的笔记: ThreeJS基础理论要点大纲

几个关键属性

  • transform 用于向2D, 3D转换的各种方式,详见下表

  • transform-origin 转换位置

  • transform-style 指明使用2D或3D

  • perspective 3D透视视距[应用在父元素上]

  • perspective-origin 指定了观察者的位置[应用在父元素上]

  • backface-visibility 定义元素在不面对屏幕时是否可见


transform接受的转换方法如下:

函数描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)
定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化,仅使用用于 X 轴的值。
translateY(y)定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

实现一个3D效果

先不管这些属性和方法,来一个简单的例子。

HTML部分:

<div class="container">
  <div class="pan"></div>
</div>

CSS 部分:

.container{
  perspective: 800px;
  .pan{
    width: 200px;
    height: 200px;
    background-color: #374d68;
    transform-style: preserve-3d;
    transform: rotateY(20deg);
  }
}

效果如图:

微信截图_20220614184624.jpg

可以看到这是一个有透视(3D)的正方形。关键两点:

1. 父元素必须设置视距 perspective

2. 给需要实现3D效果的子元素添加转换方法,如 transform: rotateY(20deg);

理解重要的perspective

perspective指定了观察者与 z=0 平面的距离,使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大,而 z<0 时则比正常小,大小程度由该属性的值决定。

听不懂吗,看图示:

微信截图_20220614193234.jpg

一个正方体:

<div class="container">
  <div class="pan">
    <div class="side top">top</div>
    <div class="side bottom">bottom</div>
    <div class="side left">left</div>
    <div class="side right">right</div>
    <div class="side front">front</div>
    <div class="side back">back</div>
  </div>
</div>

SCSS

.container{
  perspective: 500px;
  perspective-origin: left;
  .pan{
    position: relative;
    width: 200px;
    height: 200px;
    transform: rotateX(45deg) rotateY(45deg);
    transform-style: preserve-3d;
    backface-visibility: visible;
    .side{
      width: 200px;
      height: 200px;
      background-color: #6e97c9;
      position: absolute;
      backface-visibility: visible;
      opacity: 0.6;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #fff;
      &.top{
        background-color: #6ec9a6;
        transform: translateY(-100px) rotateX(90deg);
      }
      &.bottom{
        background-color: #c9bb6e;
        transform: translateY(100px) rotateX(90deg);
      }
      &.front{
        background-color: #0eedfd;
        transform: translateZ(100px);
      }
      &.back{
        background-color: #c96ec1;
        transform: translateZ(-100px);
      }
      &.left{
        background-color: #0567a8;
        transform: translateX(-100px) rotateZ(90deg)  rotateX(90deg);
      }
      &.right{
        background-color: #e45151;
        transform: translateX(100px) rotateZ(90deg)  rotateX(90deg);
      }
    }
  }
}

效果如下:

微信截图_20220614201753.jpg

关于perspective-origin

perspective-origin 指定了观察者的位置,用作 perspective 属性的消失点。

可以理解为我们站在物体的什么方位上云观察物体。默认为中心点。

比如站在其左侧:

perspective-origin: left;

微信截图_20220614202126.jpg

可以看出,是我们站在物体左侧看过去的透视效果。与之相对的另一个位置属性,是被转换物体的转换原点:

被转换物体原点transform-origin

transform-origin CSS 属性让你更改一个元素变形的原点

transform-origin的默认值也是中心点,值与perspective-origin的值一样。应该不难理解。

转换的核心transform

transform 接受各种变形转换方法。是改变形态的核心属性。其所有的值已经在上面表格列出。可以使用上例中的3D 正方体进行测试体验。

其中scaletranslaterotate都很好理解,直接体验就好。不做过多说明。我们尝试了解一下perspective(n)matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

perspective(n)

透视函数定义了到 z=0 的坐标轴,使用者能够得到 3D 定位元素的透视,每个 3D 元素在 Z 轴的位置大于零意味着离使用者更近,因此会变得更大,同理当元素 Z 周小于零时会变得 更小

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

CSS 函数 matrix3d() 以 4x4 齐次矩阵的形式定义一个 3D 转换。其结果是一个 <transform-function> 数据类型

关于这个矩阵,我查了查资料,实在是为难我了,看不懂。所幸也用的不多。不研究了。

有兴趣可参阅张鑫旭的有趣解读 https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%e7%9f%a9%e9%98%b5/


最后附上一个3D盒子的DEMO辅助直观的理解学习:

demo代码: 

css3d.zip

chrome-capture (19).gif


发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^