css之transform属性的使用

1.定义：Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

2.常用的属性值：

（1）translate（移动）:   这个属性值里面含有三个参数，依次表示x轴，y轴，z轴，

        常用的translate属性的的用法介绍：

                                           

其中x,y,z的值可以为负数也可以为百分比，设置translate位移的元素是相对于自己原来的位置来改变位置，不脱离文档流，translate 位移时，默认原点是元素的中心位置。

例1：transform：translateX(100px);   就表示相对于原来的位置，整体向右移动100px。

例2：值设置为负数可以实现将对话框居中显示

原理解释：由于dialog自带position定位，所以使用top,left把dialog移动到屏幕中间点，注意此时dialog只有左上角顶点是居中的，要想无论dialog多大都能往左和往上偏移自身的一半就可以居中了，

因此还需要使用transform函数，往左边（负数表示左）和上边（负数表示上）各移动50%的自身宽度。         

（2）rotate（旋转）：这个表示元素相对于自身作旋转，旋转的值用deg表示，30deg表示顺时针旋转30度，-30deg表示逆时针旋转30度。

         常用写法如下：

                            

（3）scale（缩放）---不常用

transform：scale（1.5）；表示元素放大1.5倍，如果要缩小0.5倍就将设为0.5即可，默认数值等于1。

也可以单独设置x轴的缩放和y轴的缩放，也可以将数值设置为负数。