原文网址：CSS--transform(转换)--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文用示例介绍CSS中的transform（转换）的用法。

        CSS3 transform可以对元素进行移动、缩放、转动、拉长、拉伸。

官网

CSS3 2D 转换 | 菜鸟教程

transform - CSS（层叠样式表） | MDN

transfrom的基本属性

translate：平移
rotate：旋转
skew：倾斜
transform-origin：基点的变换
scale：放大缩小
matrix：矩阵。旋转；平移；缩放；

用法

transform: none|transform-functions;

值

描述

测试

none

定义不进行转换。

测试

matrix(n,n,n,n,n,n)

定义 2D 转换，使用六个值的矩阵。

测试

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

定义 3D 转换，使用 16 个值的 4x4 矩阵。

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 转换元素定义透视视图。

测试

更多推荐

CSS--transform(转换)--使用/教程/实例