# CSS3 变形与透视

源码:地址 (opens new window)

# transform

使用 transform 控制元素的变形,包括控制移动、旋转、倾斜、3D转换等。

下面是CSS提供的变形动作。

选项 说明
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
  • translateXtranslateY 可以使用负数和百分数
  • translateZ 表示纵深,只能写具体的数值
  • 小技巧控制元素居中
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -100px; */
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
1
2
3
4
5
6
7
8
  • rotate3d 按向量值控制旋转
  • transform 的参数叠加与顺序对变形有不同的结果
    • 参数不会叠加,只会发生覆盖
    • 顺序的不同,结果呈现也不同

# transform-origin


变形参考点,设置元素的 X/YZ 操作的基点,用于控制旋转、倾斜等操作

  • 旋转默认以元素中心进行旋转,改变基点后可控制旋转点位置
  • 元素移动不受变形基点所影响


属性值为:topbottomleftrightcenter 或者是 百分数 | 具体数值

默认值: center center

transform-origin: left center 300px;
1

# perspective


控制元素的透视深度

  • perspective(900px) 作为函数规则控制单个元素,每个元素的透视效果是一样的
  • perspective: 900px 作为规则用于将父级整个做为透视元素,会造成里面的每个子元素的透视是不一样的。就像现实中摆一排杯子,是使用统一透视的,每个杯子的透视不一样,造成有大有小


推荐设置作为函数设置,规避透视造成元素大小不一致:transform: perspective(600px);

# preserve-3d


三维空间视角,对元素设置 Z轴 效果时需要呈现三维空间效果

transform-style: preserve-3d;
1

# perspective-origin


控制视线的角度,就像我们眼睛看物体时的聚焦点

需要设置 perspective 规则才能看到效果

# backface-visibility


控制是否可以看到元素的背面

  • 一般设置在元素上而不是父级元素上
  • 需要父级元素设置 transform-style: preserve-3d


可选属性:

  • visible 背面可见
  • hidden 背面隐藏

# 一些常见的案例

# 立体按钮

image.png

# 3D 视图切换

vue3.gif

# 背面卡片

vue31.gif

# 输入框特效

vue311.gif

# 贺卡效果

1.gif

# 按钮效果

vue31111.gif

# 立方体翻转

vue311111.gif
vue3111111.gif

更新于: 10/14/2020, 3:24:10 AM