div{
width:300px;
margin:50px auto;
background-color:yellow;
text-align:center;
}
/* css3 变形处理 */
/* rotate 顺时针旋转 */
.divRotate:hover{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
/* 缩放 水平 垂直 方向*/
.divScale:hover{
-webkit-transform:scale(1.5, 5);
-moz-transform:scale(1.5, 5);
-o-transform:scale(1.5, 5);
}
/* 倾斜 水平 垂直 方向 */
.divSkew:hover{
-webkit-transform:skew(30deg, 30deg);
-moz-transform:skew(30deg, 30deg);
-o-transform:skew(30deg, 30deg);
}
/* 移动 水平 垂直 方向 */
.divTranslate:hover{
-webkit-transform:translate(100px, -50px);
-mox-transform:translate(100px, -50px);
-o-transform:translate(100px, -50px);
}
/* css3 动画 */
/* transition */
.divTransition1{
-webkit-transition:background-color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
}
.divTransition1:hover{
background-color:#00ffff;
width:900px;
}
.divTransition2{
-webkit-transition: background-color 1s ease-in, -webkit-transform 1s ease-in;
}
.divTransition2:hover{
background-color: #00ffff;
-webkit-transform:translate(-500px);
/*-webkit-transform:rotate(360deg);*/
}
/* animations */
.divAnimations{
background-color:red;
}
/* 动画中的关键帧 */
@-webkit-keyframes mycolor{
0%{
background-color: red;
-webkit-transform: rotate(0deg);
}
40%{
background-color: darkblue;
-webkit-transform: rotate(360deg);
}
70%{
background-color: yellow;
-webkit-transform: rotate(720deg);
}
100%{
background-color: red;
-webkit-transform: rotate(1080deg);
}
}
.divAnimations{
-webkit-animation-name: mycolor;
-webkit-animation-duration: 1s; /* 花费的时间 */
-webkit-animation-timing-function: linear; /* 平滑过渡函数 */
-webkit-animation-iteration-count: 5; /* 动画播放次数 */
}
/*
平滑过渡函数:动画开始时到结束时的速度
linear: 同样的速度改变
ease-in: 先慢后快
ease-out: 先快后慢
ease: 慢,快, 慢
*/
<div class="divRotate">
divRotate test word
</div>
<div class="divScale">
divScale test word
</div>
<div class="divSkew">
divSkew test word
</div>
<div class="divTranslate">
divTranslate test word
</div>
<div class="divTransition1">
divTransition1 test word
</div>
<div class="divTransition2">
divTransition2 test word
</div>
<div class="divAnimations">
divAnimations test word;
</div>