css3新技术-旋转的元素--transform

最新推荐文章于 2025-09-10 17:59:49 发布

转载最新推荐文章于 2025-09-10 17:59:49 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/daladida/blog/719299

文章标签：

#python

本文介绍了如何使用CSS3中的transform属性实现元素的旋转、倾斜、缩放和位移等动画效果，并通过示例展示了如何定义动画的时间、速度曲线及各种变换属性。

2019独角兽企业重金招聘Python工程师标准>>>

直接上代码 html的代码：

<div class="transform transform5">123456</div>

css样式代码：

.transform {
    margin: 30px 0 80px 0;
    width: 200px;
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    background: #DEE4EE;
    color: #305999;
    text-align: center;
    line-height: 50px;
    }
.transform5 {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

第一个属性值all表示所有的属性都实现动画改变，这个例子中就是margin,width,height等等属性全部都动画改变。假如只是设置成transition: width 1s ease-in-out;这样子就只有宽度动画改变，其他都是瞬间变化。

第二个属性值规定动画完成所需时间；

第三个属性值，可选 ease:动画效果效果开始慢，再变快，然后变慢结束； ease-in:动画效果开始时慢； ease-out：动画效果结束时慢； ease-in-out：动画效果开始时和结束时慢；

.transform5:hover{
	transform:rotate(90deg) skew(-20deg)scale(1.0) translate(100px,0);
	-webkit-transform:rotate(360deg) scale(1.0) translate(0,0);
	-moz-transform:rotate(90deg) skew(-20deg)scale(1.0) translate(100px,0);
	/*-ms-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0);*/
}

第一个属性值rotate里90相当于旋转90度第二个属性值skew表示倾斜度第三个属性值scale表示缩放大小第四个属性值translate表示移动距离，(x,y) 这四个属性都可以取负值，意为反方向。

示例2，旋转的背景代码转自：http://www.xwcms.net/js/css3sl/47413.html

.xwcms {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: no-repeat url("images/author.jpg") left top;
    -webkit-background-size: 220px 220px;
    -moz-background-size: 220px 220px;
    background-size: 220px 220px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
}
.xwcms:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

转载于:https://my.oschina.net/daladida/blog/719299