放大：transfrom:scale(x,y)
旋转：transfrom:rotate(180deg)旋转180度
方法/步骤分步阅读1
/6
打开编辑器。
2
/6
创建html文档。
3
/6
创建css文档。
4
/6
添加动画。
5
/6
加上旋转角度就会开始旋转。
6
/6
完善一下时间即可完成。
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*如果使用的不是webkit浏览器 请将代码中的注释都去掉就可以看到效果*/
@-webkit-keyframes clockwiseRotate{
to {
transform:rotate(90deg)
}
}
@-webkit-keyframes anticlockwiseRotate{
to {
transform:rotate(-90deg)
}
}
@-webkit-keyframes zoomScale{
to{
transform:scale(1.5)
}
}
.stage{
width:200px
margin:200px auto auto
border-left:1px solid
border-right:1px solid
}
.box{
width:100px
height:100px
transform-origin:0 0
}
.clockwise{
background-color:purple
-webkit-animation:clockwiseRotate 2s infinite
/* 设置旋转中心为左上角 顺时针旋转90度 */
/*transform-origin:0 0
transform:rotate(90deg)*/
}
.anticlockwise{
background-color:orange
-webkit-animation:anticlockwiseRotate 2s infinite
/* 设置旋转中心为左上角 逆时针旋转90度*/
/*transform-origin:0 0
transform:rotate(-90deg)*/
}
.zoom{
background-color:green
-webkit-animation:zoomScale 2s infinite
/* 设置放大中心为元素中心 放大1.5倍*/
transform-origin:50% 50%
/*transform:scale(1.5)*/
}
</style>
</head>
<body>
<div class="stage">
<div class="box clockwise"></div>
<div class="box anticlockwise"></div>
<div class="box zoom"></div>
</div>
</body>
</html>
