主要是对于animation和transform的综合应用
transform是基于图形变换
animation是可以生成不间断的动画
transform-style: preserve-3d;用来保证3d的背面效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>硬币旋转</title>
<style>
.coin>div{
position: absolute;
width:100%;
height:100%;
}
img{
width:100%;
height:100%;
border-radius: 50%;
}
@keyframes rotate{
0%{
transform: rotateY(0deg