likes
comments
collection
share

为了实现3D倾斜视差效果，重识3D属性perspective、transform

作者站长头像
站长
· 阅读数 31

前言

最近项目中有个页面效果，两侧的内容模块以卡片的形式展示，并且卡片是倾斜的，实现该效果就需要用到css3的3d相关属性，由于没怎么用过，以致于一开始无从下手，当时页面又催的急，就让ui帮忙切了背景图，简单实现了效果，现在有了空闲来实现下效果，也重新再学习下相关知识。

页面效果如下，我把页面相关内容作了一下替换 为了实现3D倾斜视差效果，重识3D属性perspective、transform

具体实现

  1. html结构分为舞台元素（父元素）和两侧的倾斜元素以及中间的元素
<div class="content">
    // 两侧的元素  需要实现3d倾斜视差效果
    <div class="left box">
      ...
    </div>
    <div class="right box">
      ...
    </div>
    // 中间的元素  没有3d倾斜视差效果
    <div class="middle-box">
      ...
    </div>
  </div>
  1. 舞台元素content设置视角(perspective)
.panel2 .content {
  perspective: 1200px;
}
  1. 两侧的元素left和right设置旋转、视角位置translateZ:60px以及缩放scale(.92)。left元素沿y轴旋转45deg,right元素沿y轴旋转-45deg。
.panel2 .box.left {
  transform: rotateY(45deg) translateZ(60px) scale(.92);
}

.panel2 .box.right {
  transform: rotateY(-45deg) translateZ(60px) scale(.92);
}

3D属性

1. transform

transform属性通过修改 CSS 视觉格式化模型的坐标空间来实现元素的旋转rotate，缩放scale，位移translate或倾斜skew效果

旋转rotate

rotateX(45deg)

沿X轴旋转45deg , rotate3D(1, 0, 0, 45deg)的简写形式

rotateY(45deg)

沿Y轴旋转45deg , rotate3D(0, 1, 0, 45deg)的简写形式

rotateZ(45deg)

沿Z轴旋转45deg , rotate3D(0, 0, 1, 45deg)的简写形式

注：旋转角度数值是正的，则为顺时针旋转，如果是负的，则是逆时针旋转

可以根据这张图，来区分X、Y、Z轴。（ps:大拇指向右，食指向下，其余的手指指向前方,这样就建立了一个空间坐标系，容易理解些）

为了实现3D倾斜视差效果，重识3D属性perspective、transform

缩放scale

改变元素的大小，代表缩放的纵坐标值sy，如果不存在，则其默认值为横坐标值，从而导致保持元素形状进行均匀缩放。

语法：

scale(sx) or
scale(sx, sy)
位移translate

用于移动元素的位置

translateX() 用于水平移动元素

translateY() 用于垂直移动元素

translateZ() 用于 3D 空间的 z 轴方向移动元素

translateZ功能是实现元素在自己的眼前或近或远。

设置的translateZ值越小，则元素越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，元素越大。

当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（因为元素正好移到了你的眼睛前面）。

当translateZ值再变大，超过201像素的时候，该元素看不见了

倾斜skew

用于拉伸（平移）元素

语法：

skew(ax)       或
skew(ax, ay)

注：参数为角度，ax为沿横坐标拉伸，ay沿纵坐标拉伸

2. perspective

perspective属性呈现视角立体感，仅仅是一种3D的视觉感受，并不是真正的3D环境

语法：

perspective: 1000px;

注：当值为负值时，无透视效果；值越小，视角越深

transform-style:preserve-3d 设置元素的子元素应位于 3D 空间中，一般应用在舞台元素