<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????#first{ ???????????????width: 200px; ???????????????height: 200px; ???????????????background-color: orange; ???????????????margin-left: 200px; ???????????????margin-top: 200px; ???????????????/*=========过渡========*/ ???????????????transition: 5s; ???????????} ???????????#first:hover{ ???????????????/*===========2D==========*/ ???????????????/*transform: rotate(45deg);*/ ?/* 平面内旋转*/ ???????????????/*transform: translate(30px,30px); ??位置的移动,表示向右30px,向下30px*/ ???????????????/*transform: scale(2); ??倍数的放大*/ ???????????????/*transform: skew(0deg,-30deg); ?扭曲*/ ???????????????/*transform: skew(30deg,30deg);*/ ???????????????/*===========3D=============*/ ???????????????/*transform: rotateX(180deg);*/ ???????????????/*transform: rotateY(360deg);*/ ???????????????/*transform: rotateZ(360deg);*/ ???????????} ???????????#second{ ???????????????width: 300px; ???????????????height: 300px; ???????????????background: black; ???????????????position: relative; ????/*相对定位*//*由于需要位置改变,所以增加了position属性*/ ???????????????animation: mysecond 5s infinite /*alternate; ????动画捆绑,两个值,动画名称/时长,加上一个无限执行,交替执行 */; ???????????} ???????????@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;} ???????????/*from{background: red;border-radius: 90px;box-shadow: -35px 0px 15px gray;left: 0px;top: 0px;} ???????????to{background: yellow;border-radius: 0px;left: 400px;top: 0px;} ???????????}*/ ???????</style> ???</head> ???<body> ???????<!--<div id="first"> ???????????今天周末 ???????</div>--> ???????<!----------------动画---------------> ???????<div id="second"> ???????????????????</div> ???</body></html>--旋转transform
-----2D
--------rotate(edg)平面内旋转
--------translate(横向，纵向)
--------scale(宽，高)
--------skew(水平角度，垂直角度)
-----3D
--------rotateX(edg)
--------rotateY(edg)
--过渡transition:3s ????时间 ?不是hover加 ??是那个容器需要给那个容器加
--动画
-----属性:animation:动画名称、时长，加上一个无限执行，交替执行
-----@keyframes动画名称{
???????????????????????0%
???????????????????????25%
???????????????????????50%
???????????????????????75%
???????????????????????100%
???????????????????????}
----------------动画名称{
???????????????????????form{}
???????????????????????to{}
???????????????????????} ???
050602课堂css3旋转、过渡、动画
原文地址：https://www.cnblogs.com/mjwwzy/p/8999446.html