css3中实现旋转效果的属性是“transform”。transform属性用于向元素应用2d或3d转换，当该属性和rotate()、rotate3d()、rotatex()、rotatey()或rotatez()函数一起使用即可实现旋转。
本教程操作环境windows7系统、css3&&html5版、dell g3电脑。
css3中实现旋转效果的属性是“transform”。
transform属性用于向元素应用2d或3d转换，当该属性和以下函数一起使用即可实现元素旋转
rotate(angle) 定义 2d 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3d 旋转。
rotatex(angle) 定义沿着 x 轴的 3d 旋转。
rotatey(angle) 定义沿着 y 轴的 3d 旋转。
rotatez(angle) 定义沿着 z 轴的 3d 旋转。
示例1
<!doctype html><html><head><meta charset=utf-8> <style> div{width:200px;height:100px;background-color:yellow;/* rotate div */transform:rotate(7deg);-ms-transform:rotate(7deg); /* ie 9 */-webkit-transform:rotate(7deg); /* safari and chrome */}</style></head><body><div>hello</div></body></html>示例2
<!doctype html><html><head><meta charset=utf-8><style>*,*:after,*:before {box-sizing: border-box;}body {background: #f5f3f4;margin: 0;padding: 10px;font-family: 'open sans', sans-serif;text-align: center;}h1 {color: #4c4c4c;font-weight: 600;border-bottom: 1px solid #ccc;}h2,h4 {font-weight: 400;color: #4d4d4d;}.card {display: inline-block;margin: 10px;background: #fff;padding: 15px;min-width: 200px;box-shadow: 0 3px 5px #ddd;color: #555;}.card .box {width: 100px;height: 100px;margin: auto;background: #ddd;cursor: pointer;box-shadow: 0 0 5px #ccc inset;}.card .box .fill {width: 100px;height: 100px;position: relative;background: #03a9f4;opacity: .5;box-shadow: 0 0 5px #ccc;-webkit-transition: 0.3s;transition: 0.3s;}.card p {margin: 25px 0 0;}.rotate:hover .fill {-webkit-transform: rotate(45deg);transform: rotate(45deg);}.rotatex:hover .fill {-webkit-transform: rotatex(45deg);transform: rotatex(45deg);}.rotatey:hover .fill {-webkit-transform: rotatey(45deg);transform: rotatey(45deg);}.rotatez:hover .fill {-webkit-transform: rotate(45deg);transform: rotate(45deg);}.scale:hover .fill {-webkit-transform: scale(2, 2);transform: scale(2, 2);}.scalex:hover .fill {-webkit-transform: scalex(2);transform: scalex(2);}.scaley:hover .fill {-webkit-transform: scaley(2);transform: scaley(2);}</style></head><body><h1>css3 元素旋转</h1><!-- rotate--><div class=card><div class=box rotate><div class=fill></div></div><p>rotate(45deg) </p></div><div class=card><div class=box rotatex><div class=fill></div></div><p>rotatex(45deg)</p></div><div class=card><div class=box rotatey><div class=fill></div></div><p>rotatey(45deg)</p></div><div class=card><div class=box rotatez><div class=fill></div></div><p>rotatez(45deg) </p></div></body></html>（学习视频分享css视频教程）