类型

效果展示

实现方案

时钟的走针

时钟的走针即时针和分针，在不同时候会指向不同的数字，这时候呈现在时钟上的角度也不一样。所以想要实现走针，将两个走针设置不同的旋转角度即可。

走针是一个带圆角的矩形，通过设置transform属性rotate值就可以指向时钟不同的位置。

时针我设置的是上午11时，时针元素的属性设置为transform: rotate(-30deg)，分针设置的10分，分针元素属性设置为transform: rotate(62deg)

一排泡泡

其实这一排的泡泡在没有设置transform属性的情况下，样式是完全一致的。

之所以呈现递减的效果，是因为我再后面两个泡泡元素上设置了缩放。第二个泡泡缩放为0.7，即transform: scale(0.7)，第三个泡泡缩放为0.6，即transform: scale(0.6)。

广告牌

我们在马路上或者公路上看到的广告牌，一般都是横向的。

这里我为了突出广告牌的立体效果，在纵向的Y轴上做了一点倾斜的角度。transform属性的 skewY可以定义沿着 Y 轴的 2D 倾斜转换。所以为广告牌元素添加的样式为：transform: skewY(20deg)。

行走的小人

行走的小人灵魂在于摆动的手臂和腿。四肢是线条的情况下，为元素的transform属性设置旋转，就可以实现摆动的效果。

这里我把火柴人的左臂和右臂设置的旋转角度不同。左臂是transform: rotate(30deg)，右臂是transform: rotate(-140deg)。

属性名

作用

属性值

transform (2D)

应用于元素的2D转换。

none：定义不进行转换。

matrix(n,n,n,n,n,n)：定义 2D 转换，使用六个值的矩阵。

translate(x,y)：定义 2D 转换。

translateX(x)：定义转换，只是用 X 轴的值。

translateY(y)：定义转换，只是用 Y 轴的值。

scale(x[,y]?) ：定义 2D 缩放转换。

scaleX(x)：通过设置 X 轴的值来定义缩放转换。

scaleY(y)：通过设置 Y 轴的值来定义缩放转换。

rotate(angle)：定义 2D 旋转，在参数中规定角度。

skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX(angle)：定义沿着 X 轴的 2D 倾斜转换。

skewY(angle)：定义沿着 Y 轴的 2D 倾斜转换。