通过css3的transform transition可以实现平移,旋转,缩放,拉伸等效果
1.缩放
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
2.平移
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px ,0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
3旋转 deg是角度的单位
-webkit-transform: rotate(0);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
4复合效果
-webkit-transform: translate(0px,0px) scale(1) rotate(0);
-moz-transform: translate(0px,0px) scale(1) rotate(0);
-ms-transform: translate(0px,0px) scale(1)rotate(0) ;
-o-transform: translate(0px,0px) scale(1) rotate(0);
transform: translate(0px,0px) scale(1) rotate(0);
5.让它变化持续时间变慢便于观看 第一个参数表示全部属性,第二个表示持续时间,第三个表示非线性变化,还有一个开始时间,可以省略
-webkit-transition: all 3s ease ;
-moz-transition: all 3s ease ;
-ms-transition: all 3s ease ;
-o-transition: all 3s ease ;
transition: all 3s ease ;
.test:hover{
-webkit-transform: scale(2)rotate(180deg) translate(200px,200px);
-moz-transform: scale(2) rotate(180deg) translate(200px,200px);
-ms-transform: scale(2) rotate(180deg) translate(200px,200px);
-o-transform: scale(2) rotate(180deg) translate(200px,200px);
transform: scale(2) rotate(180deg) translate(200px,200px);
}
下面是本人做的一个简单的2D动画效果,大家可以参考<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/animate.css"/> <style type="text/css"> @keyframes go{ 0%{ transform: translate(0,0) rotateZ(0deg); } 25%{ transform: translate(500px,0) rotateZ(-1000deg); } 50%{ transform: translate(500px,300px) rotateZ(-2000deg); } 75%{ transform: translate(0,300px) rotateZ(-3000deg); } 100%{ transform: translate(0,0) rotateZ(-4000deg); } } .big{ margin: 0 auto; margin-top: 200px; width: 600px; height: 400px; border: 1px solid red; } .small{ margin: 0 auto; width: 400px; height: 200px; border: 1px solid yellow; } .a{ width: 92px; height: 92px; border-left: 4px solid blue; border-bottom: 4px solid red; border-top: 4px solid orange; border-right: 4px solid aqua; background-image: -webkit-radial-gradient( 46px 46px, yellow 20%, red 60%, blue 20%);
/*这一句是颜色渐变为了美观*/
border-radius: 50px; animation: go 10s linear; animation-iteration-count: infinite; } </style> </head> <body> <div class="big"> <div class="a"></div> <div class="small"></div> </div> </body> </html>
这样就可以看到有效果了,都写五行是为了做浏览器兼容问题,复合状态下改变顺序会改变效果.
希望对刚入门的新手有所帮助,本人也是刚入门,希望有错的地方大神多多指点