您的位置：首页 > Web前端 > CSS

CSS3笔记2— transform旋转、缩放、倾斜、移动

2017-03-13 09:26 513 查看

1.旋转

CSS：

<style>
div {
width: 200px;
height: 200px;
background-color: pink;

-ms-transform: rotate(45deg);/*IE9*/
-moz-transform: rotate(45deg);/*Firefox*/
-webkit-transform: rotate(45deg);/*Safari 和 Chrome*/
-o-transform: rotate(45deg);/*Opera*/
}
</style>

html：

<body>
<div></div>
</body>

解析：

-ms-transform: rotate(45deg); /IE9/

-moz-transform: rotate(45deg); /Firefox/

-webkit-transform: rotate(45deg); /Safari 和 Chrome/

-o-transform: rotate(45deg); /Opera/

以上四句是兼容。

rotate(45deg)意思是:表示顺时针旋转，deg是CSS3中的角度单位。

2. 缩放

-ms-transform: scale(2,2);/*IE9*/
-moz-transform: scale(2,2);/*Firefox*/
-webkit-transform: scale(2,2);/*Safari 和 Chrome*/
-o-transform: scale(2,2);/*Opera*/

解析：

transform:scale(值)；它的值是指定的缩放的倍率，比如：

0.5就是缩放到50%；

1就是100%；

1.5就是放大150%；

可能值：scale（x,y)是元素X轴Y轴同时缩放；

scaleX（x)是元素X轴缩放；

scaleY（y)是元素Y轴缩放；

3. 倾斜

-ms-transform: skew(45deg,45deg);/*IE9*/
-moz-transform: skew(45deg,45deg);/*Firefox*/
-webkit-transform: skew(45deg,45deg);/*Safari 和 Chrome*/
-o-transform: skew(45deg,45deg);/*Opera*/

transform : skew(值)；它的值就是角度，

可能值：

skew(x,y);是元素在水平和垂直方向同时扭曲，只有一个参数时只在水平方向倾斜。

skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；

4.移动

-ms-transform: translate(50px,50px);/*IE9*/
-moz-transform: translate(50px,50px);/*Firefox*/
-webkit-transform: translate(50px,50px);/*Safari 和 Chrome*/
-o-transform: translate(50px,50px);/*Opera*/

解析：

translate(值）;值是移动的距离。

可能值：

translate(x,y);是元素在水平和垂直方向同时移动。

translateX(x)仅使元素在水平方向移动（X轴移动）；

translateY(y)仅使元素在垂直方向移动（Y轴移动）；

5.transition动画

鼠标未放上：

鼠标放上，图片颜色慢慢旋转、放大、过渡到粉色效果，离开后还原：

html：

<body>
<div class="box"></div>
</body>

CSS:

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid #aaa;
background-color: red;

transition: all 1s linear;  /*W3C标准*/
-webkit-transition: all 1s linear;/*谷歌*/
-moz-transition: all 1s linear;/*火狐*/
-o-transition: all 1s linear;/*opera*/

}
.box:hover {
background-color: pink;

transform: rotate(15deg) scale(1.2); /*W3C标准*/
-webkit-transform: rotate(15deg) scale(1.2); /*谷歌*/
-moz-transform: rotate(15deg) scale(1.2); /*火狐*/
-o-transform: rotate(15deg) scale(1.2); /*opera*/
}
</style>

解析：

all : 所有属性都将获得动画效果；也可以把all换成background一个属性，即：

transition: background 1s linear;

1s : 规定完成动画效果的需要花费的时间；

liner : 在延续时间段，变换的速率变化是匀速变化；其次还有ease(逐渐变慢)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3

相关文章推荐

新的分享

章节导航