导航分类

CSS3 2D 转换 CSS3 过渡

CSS3 3D 转换

主题

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

CSS3 3D 转换

CSS3 3D 转换允许你在三维空间中操作元素，创建更丰富的视觉效果。与2D转换相比，3D转换增加了Z轴的处理能力，可以实现更复杂的空间变换。悬停（手机端点击）下面的卡片，查看元素 3D 转换的显示效果：

绕X轴旋转

绕Y轴旋转

绕Z轴旋转

3D平移

3D缩放

CSS3 绕X轴旋转

rotateX()方法，指定元素围绕X轴进行三维空间旋转效果。

.example {
    transform: rotateX(180deg);
}

实现的效果：

绕X轴旋转

CSS3 绕Y轴旋转

rotateY()方法，指定元素围绕Y轴进行三维空间旋转效果。

.example {
    transform: rotateY(180deg);
}

实现的效果：

绕Y轴旋转

CSS3 绕Z轴旋转

rotateZ()方法，指定元素围绕Z轴进行三维空间旋转效果。

.example {
    transform: rotateZ(180deg);
}

实现的效果：

绕Z轴旋转

CSS3 转换属性

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

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

3D 转换方法

方法	描述
`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 转换元素的透视视图。

CSS3 2D 转换 CSS3 过渡

评论区 0

发表评论

教程介绍

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

36 章节

65 阅读

0 评论

CSS3 3D 转换

CSS3 3D 转换

CSS3 绕X轴旋转

实现的效果：

CSS3 绕Y轴旋转

实现的效果：

CSS3 绕Z轴旋转

实现的效果：

CSS3 转换属性

3D 转换方法

CSS 基础教程

CSS3 教程

CSS3 3D 转换

CSS3 3D 转换

CSS3 绕X轴旋转

实现的效果：

CSS3 绕Y轴旋转

实现的效果：

CSS3 绕Z轴旋转

实现的效果：

CSS3 转换属性

3D 转换方法

CSS 基础教程

CSS3 教程

意见反馈

反馈提交成功