4.3 CSS变形

CSS变形（CSS Transformations）允许你旋转、缩放、倾斜或平移元素。这些变形不会影响页面的布局，变形后仍占据变形前的空间。CSS变形通过“transform”属性实现，“transform”属性可以应用于任何元素，包括<div>、<img>、<span>等。

4.3.1 CSS变形基础

“transform” 属性用于对元素进行 2D 或 3D 转换。可设置 “transform” 为 “none ”或转换函数，转换函数可设置多个。 “transform-functions” 是指转换函数，如 rotate(), scale(), translate(), skew() 等。“transform”属性基础语法如下：

4.3.2 CSS 2D转换

CSS 2D 转换以二维空间的方式对元素进行变形，比如移动、旋转、缩放或倾斜。通过CSS的“transform”属性实现转换，可以不需要使用图片或其他复杂的技术就能实现视觉上的变化。

4.3.2.1 CSS 2D转换属性

通过使用 CSS transform 属性，您可以使用translate()、rotate()、scaleX()、scaleX()、scaleY()、scale()、skewX()、skewY()、skew()、matrix()等2D 转换方法。使用“transform-origin”属性来改变转换元素的位置。以下是转换方法的具体说明：

（1）translate() 方法

translate() 方法从当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。将元素从当前位置向右移动 50 个像素，并向下移动 100 个像素。具体示例如下：

（2）rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。将元素顺时针旋转 20 度。具体示例如下：

使用负值将逆时针旋转元素， 元素逆时针旋转 20 度。具体示例如下：

（3）scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。将元素增大为原始宽度的两倍和原始高度的三倍。具体示例如下：

将元0素减小为原始宽度和高度的一半。具体示例如下：

（4）scaleX() 方法

scaleX() 方法增加或减少元素的宽度。将元素增大为原始宽度的两倍。具体示例如下：

将元素缩减为原始宽度的一半。具体示例如下：

（5）scaleY() 方法

scaleY() 方法增加或减少元素的高度。将元素增大到原始高度的三倍。具体示例如下：

将元素缩减为原始高度的一半。具体示例如下：

（6）skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。将元素沿X轴倾斜 20 度。具体示例如下：

（7）skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。将元素沿 Y 轴倾斜 20 度。具体示例如下：

（8）skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。将元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度。具体示例如下：

将元素沿 X 轴倾斜 20 度，元素沿 X 轴倾斜 20 度。具体示例如下：

（9）matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。matrix() 方法可接受6个参数，包括数学函数等。语法示例如下：

4.3.2.2 案例：旋转

本案例使用“transform”属性和“rotate()”函数，通过点击按钮实现不同的旋转角度;案例效果如图4-3-2-2-1，示例如下：

4.3.2.3 案例：缩放

本案例使用“transform”属性和“scale()”函数，通过点击按钮实现放大和缩小;案例效果如图4-3-2-2-2，示例如下：

4.3.2.4 案例：倾斜

本案例使用“transform”属性和“skew()”函数，通过点击按钮实现倾斜和恢复;案例效果如图4-3-2-2-3，示例如下：

4.3.3 CSS 3D转换

CSS 3D转换是CSS3引入的一组属性，允许在网页上创建三维效果，无需使用Flash或SVG等插件。这些转换通过使用transform和transform-style等属性来实现，在二维屏幕上模拟出三维空间中的移动、旋转和缩放等效果。与平面旋转相反的是，3D 旋转的组合通常是不可交换的；所以定义旋转规则的值的顺序需要严格控制。在 3D 空间之中，旋转有 3 个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并通过变换源点传递（即通过 transform-origin CSS 属性定义）。

4.3.3.1 CSS 3D转换属性

CSS 3D 转换方法通过 CSS “transform”属性，可以使用rotateX()、rotateY()、rotateZ()转换方法。转换属性和方法具体解释如下：

（1）transform 属性

① rotateX() 方法

rotateX() 方法使元素绕X轴旋转给定角度。示例如下：

② rotateY() 方法

rotateY() 方法使元素绕Y轴旋转给定角度。示例如下：

③ rotateZ() 方法

rotateZ() 方法使元素绕Z轴旋转给定角度。示例如下：

（2）transform-origin 属性

transform-origin 属性改变被转换元素的位置。示例如下：

（3）transform-style 属性

transform-style属性规定如何在 3D 空间中呈现被嵌套的元素。transform-style属性必须与 transform 属性一同使用。示例如下：

（4）perspective 属性

perspective属性定义3D元素距视图的距离（单位为像素）。perspective属性允许更改查看3D元素的视角。当元素定义 perspective 属性时，子元素会获得透视效果。perspective属性只影响 3D 转换的元素。使用示例如下：

（5）perspective-origin 属性

perspective-origin属性定义 3D 元素所基于的 X 轴和 Y 轴。perspective-origin属性允许改变 3D 元素的底部位置。当为元素定义 perspective-origin属性时，子元素会获得透视效果。perspective-origin属性必须与 perspective属性一同使用，而且只影响3D转换元素。示例如下：

（6）backface-visibility 属性

backface-visibility 属性定义当元素不面向屏幕时是否可见。示例如下：

4.3.3.2 案例：3D正方体盒子旋转

本案例创建一个3D正方体盒子并使其旋转。定义一个包含六个面的正方体，每个面都是一个div元素，并通过CSS的transform属性来定位和旋转它们以形成正方体。使用动画让整个正方体绕轴心旋转。案例效果如图4-3-3-2-1，示例如下：

4.3.3.3 案例：3D旋转轮播

本案例创建6个div元素并旋转，并通过CSS的transform属性设置每个项目的初始旋转和偏移。使用动画让整个轮播绕轴心旋转。案例效果如图4-3-3-2-2，示例如下：

创作说明

名称：编程指南-CSS案例开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙