导航分类

CSS3 字体 CSS3 3D 转换

CSS3 2D 转换

主题

默认模式
浅蓝色模式
淡红色模式
深夜模式

CSS3 2D 转换

CSS3 2D 转换允许你对元素进行移动、旋转、缩放和倾斜等操作，这些转换不会影响文档的正常流，但会改变元素的视觉呈现。

悬停（手机端点击）下面的卡片，查看元素 2D 转换的显示效果：

平移 (translate)

旋转 (rotate)

缩放 (scale)

倾斜 (skew)

组合转换

改变转换原点

CSS3 平移 (translate)

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动到指定位置。

.example {
    transform: translate(20px,26px);
    -ms-transform: translate(20px,26px); /* IE 9 */
    -webkit-transform: translate(20px,26px); /* Safari and Chrome */
}

实现的效果：

ORIGINAL

TRANSFORMED

CSS3 旋转 (rotate)

rotate()方法，指定元素旋转的角度，正值控制元素顺时针旋转，负值控制元素逆时针旋转。

.example {
    transform: rotate(10deg);
    -ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* Safari and Chrome */
}

实现的效果：

ORIGINAL

TRANSFORMED

CSS3 缩放 (scale)

scale()方法，指定元素缩放的比例，取决于宽度（X轴）和高度（Y轴）的参数。

.example {
    -ms-transform:scale(1.5,1.3); /* IE 9 */
    -webkit-transform: scale(1.5,1.3); /* Safari */
    transform: scale(1.5,1.3); /* 标准语法 */
}

实现的效果：

ORIGINAL

TRANSFORMED

CSS3 倾斜 (skew)

skew()方法，指定元素倾斜的角度，取决于X轴倾斜角度和X轴倾斜角度的参数。

.example {
    transform: skew(20deg,10deg);
    -ms-transform: skew(20deg,10deg); /* IE 9 */
    -webkit-transform: skew(20deg,10deg); /* Safari and Chrome */
}

实现的效果：

ORIGINAL

TRANSFORMED

CSS3 矩阵 (matrix)

matrix()方法，将 2D 转换方法合并成一个，它通过六个参数来实现元素的 2D 线性转换。

matrix()方法各参数对应的变换效果：

a：水平缩放 (x轴缩放)
b：垂直倾斜 (y轴倾斜)
c：水平倾斜 (x轴倾斜)
d：垂直缩放 (y轴缩放)
e：水平移动 (x轴平移)
f：垂直移动 (y轴平移)

.example {
    transform: skew(20deg,10deg);
    -ms-transform: skew(20deg,10deg); /* IE 9 */
    -webkit-transform: skew(20deg,10deg); /* Safari and Chrome */
}

实现的效果：

ORIGINAL

TRANSFORMED

CSS3 转换属性

以下列出了所有的CSS3 转换属性：

属性	描述
transform	适用于 2D 或 3D 转换的元素
transform-origin	允许您更改转化元素位置

2D 转换方法

方法	描述
`matrix(n,n,n,n,n,n)`	定义 2D 转换，使用六个值的矩阵。
`translate(x,y)`	定义 2D 转换，沿着 X 和 Y 轴移动元素。
`translateX(n)`	定义 2D 转换，沿着 X 轴移动元素。
`translateY(n)`	定义 2D 转换，沿着 Y 轴移动元素。
`scale(x,y)`	定义 2D 缩放转换，改变元素的宽度和高度。
`scaleX(n)`	定义 2D 缩放转换，改变元素的宽度。
`scaleY(n)`	定义 2D 缩放转换，改变元素的高度。
`rotate(angle)`	定义 2D 旋转，在参数中规定角度。
`skew(x-angle,y-angle)`	定义 2D 倾斜转换，沿着 X 和 Y 轴。
`skewX(angle)`	定义 2D 倾斜转换，沿着 X 轴。
`skewY(angle)`	定义 2D 倾斜转换，沿着 Y 轴。

CSS3 字体 CSS3 3D 转换

评论区 0

发表评论

教程介绍

CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。

36 章节

96 阅读

0 评论

CSS3 2D 转换

CSS3 2D 转换

CSS3 平移 (translate)

实现的效果：

CSS3 旋转 (rotate)

实现的效果：

CSS3 缩放 (scale)

实现的效果：

CSS3 倾斜 (skew)

实现的效果：

CSS3 矩阵 (matrix)

实现的效果：

CSS3 转换属性

2D 转换方法

CSS 基础教程

CSS3 教程

CSS3 2D 转换

CSS3 2D 转换

CSS3 平移 (translate)

实现的效果：

CSS3 旋转 (rotate)

实现的效果：

CSS3 缩放 (scale)

实现的效果：

CSS3 倾斜 (skew)

实现的效果：

CSS3 矩阵 (matrix)

实现的效果：

CSS3 转换属性

2D 转换方法

CSS 基础教程

CSS3 教程

意见反馈

反馈提交成功