旋转 transform
--------2d
--------rotate（deg) 平面内旋转
-------translate(横向，纵向）
scale(宽，高）
skew(水平角度，垂直角度）
3d
rotatex(deg)
rotate(deg)
过渡transition:3s 时间 不是hover加是那个容器需要给那个容器加
动画
属性：animation:动画名称, 时长，加上一个无限执行，交替执行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #first{200px; height: 200px; background-color: orange; margin-lefe:200px; margn-top:200px; transition: background-position:5s} #first:hover {=======2D======== transform: rotate(45deg); transform:translate(30px,30px); transform:scale(2); transform: skew(0deg,-30deg); transform: skew(30deg,30deg) ;========3D======= transform:rotateX(180deg); transform: rotateY(360deg); transform:rotateZ(360deg)} #second{ 300px; height: 300px; background: black; position:relative; animation:mysecond 5s infinite;} @keyframes mysecond{ 0% {background: red;border-radius:90px;box-shadow:-35px 0px 15px gray; left:0px; top:0px ; }} 25% {background: yellow;border-radius:0px ;left:400px;top:0px} 50% {background: blue; border-radius: 90px; left:400px;top:300px } 75%{background:green;border-radius: 0px;box-shadow: 0px 30px 15px gray; left:0px top:300px;} 100%{background: red;border-radius:20px; left:0px top:0px; } </style> </head> <body> <div id="first"> 今天周末 </div> <div id="second"> </div > </body> </html>