Css旋转 缩放 移动 倾斜

admin管理员组

文章数量:1794759

Css旋转 缩放 移动 倾斜

今天与大家来分享一下我做的Css3动画案例。 　　在展示我的案例之前先给大家说说实现这个案例所需要的一些属性。 　　transform 属性允许我们对元素进行旋转、缩放、移动或倾斜。 　　通过 CSS3 2D转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。 　　 translate()===>移动

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 　　　　translate分为三种情况： 　　　　　　1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 　　　　　　2、translateX(x)仅水平方向移动（X轴移动） 　　　　　　3、translateY(y)仅垂直方向移动（Y轴移动）

rotate()===》旋转

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。（单位：deg） 　　　　　 rotate(30deg);2D旋转 正角度-顺时针 负角度-逆时针

scale()===》缩放 　　　　scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。 　　　　translate分为两种情况：

1、caleX(x)x轴扩大2倍 　　　　　　2、scaleY(y)y轴扩大2倍

skew()===》切斜 　　　　参数表示倾斜角度（单位：deg） 　　　　skew分为两种情况： 　　　　　　1、一个参数时：表示水平方向的倾斜角度； 　　　　　　1、两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

本文标签： 缩放css