css 缩小平移,CSS3 Transform 转换（制作旋转、位移、缩放等效果详解）

css 缩小平移,CSS3 Transform 转换（制作旋转、位移、缩放等效果详解）

CSS3 transform 是什么？

transform 字面上是：变换；改变，使…变形；转换的意思。

在CSS3中 transform的属性包括：旋转 rotate()、位移 translate()、缩放 scale()和扭曲(倾斜) skew()以及矩阵变形 matrix()。下面我们一起来看看CSS3中具体如何实现的吧。

语法：

transform ： none | [ ]*

也就是：

transform: rotate | scale | skew | translate |matrix;

none:表示不进么变换；表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如 rotate、scale、translate 三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号(“，”)隔开，但 transform中使用多个属性时却需要有空格隔开。

下面我们分别来介绍这几个属性值参数的具体使用方法：

rotate() 旋转函数 取值度数

deg 度数

transform-origin 旋转的基点

translate() 位移函数

translateX()

translateY()

skew() 倾斜函数 取值度数

skewX()

skewY()

scale() 缩放函数 取值 正数、负数和小数

scaleX()

scaleY()

一、旋转 rotate

语法：

transfo