css3动画学习之 transform
预览地址 点击预览
属性说明
transform 旋转的角度 0-180
scale 放大的比例
例子 transform: rotate(60deg) scale(1.5); //旋转60°，放大1.5倍
代码，直接可运行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>动画旋转</title>
</head>
<body><div class="test1"></div>
</body><style>
.test1{width: 120px;height: 120px;background: salmon;animation-name: dh;animation-iteration-count: infinite;animation-duration:4.5s;position: absolute;top: 70%;left: 10%;animation-direction: alternate;
}@keyframes dh{0%{background: salmon;top: 65%;left: 18%;transform: rotate(0deg) scale(1.0);}20%{background: orangered;top: 60%;left: 25%;transform: rotate(60deg) scale(1.3);border-radius: 10%;}40%{background: gold;top: 55%;left: 35%;transform: rotate(120deg) scale(1.6);border-radius: 20%;}60%{background: forestgreen;top: 50%;left: 44%;transform: rotate(180deg) scale(1.4);border-radius: 30%;}80%{background: slateblue;top: 44%;left: 50%;transform: rotate(260deg) scale(1.2);border-radius: 20%;}100%{background: burlywood;top: 39%;left: 65%;transform: rotate(360deg) scale(1.0);border-radius: 10%;}
}
</style>
</html>