本教程操作环境：windows7系统、css3&&html5版、dell g3电脑。
transform属性应用于元素的2d或3d转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform属性有5个设置平移的属性值：
rotate(angle) 定义 2d 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3d 旋转。
rotatex(angle) 定义沿着 x 轴的 3d 旋转。
rotatey(angle) 定义沿着 y 轴的 3d 旋转。
rotatez(angle) 定义沿着 z 轴的 3d 旋转。
代码示例：
html代码：
<!-- 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><h4>perspective : 100</h4><div class="perspective-100"> <div class="card"> <div class="box rotatex"> <div class="fill"></div> </div> <p>rotatex(90deg)</p> </div> <div class="card"> <div class="box rotatey"> <div class="fill"></div> </div> <p>rotatey(45deg)</p> </div></div><h4>perspective : 200</h4><div class="perspective-200"> <div class="card"> <div class="box rotatex"> <div class="fill"></div> </div> <p>rotatex(90deg)</p> </div> <div class="card"> <div class="box rotatey"> <div class="fill"></div> </div> <p>rotatey(45deg)</p> </div></div><!-- transform origin--><h2>transform origin</h2><div class="card"> <div class="box rotate"> <div class="fill to-100-0-0"></div> </div> <p>transform-origin : 100% 0 0 <br/>rotate(45deg)</p></div><div class="card"> <div class="box rotate"> <div class="fill to-0-100-0"></div> </div> <p>transform-origin : 0 100% 0<br/>rotate(45deg)</p></div><div class="card perspective-200"> <div class="box rotatex"> <div class="fill to-0-100-0"></div> </div> <p>transform-origin : 0 100% 0<br/>rotatex(45deg)</p></div><div class="card perspective-200"> <div class="box rotatex"> <div class="fill to-100-0-0"></div> </div> <p>transform-origin : 100% 0 0<br/>rotatex(45deg)</p></div><div class="card perspective-200"> <div class="box rotatey"> <div class="fill to-0-100-0"></div> </div> <p>transform-origin : 0 100% 0 <br/>rotatey(45deg)</p></div><div class="card perspective-200"> <div class="box rotatey"> <div class="fill to-100-0-0"></div> </div> <p>transform-origin : 100% 0 0<br/>rotatey(45deg)</p></div>
css代码：
*, *: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);}.perspective-100 .box { -webkit-perspective: 100px; perspective: 100px;}.perspective-200 .box { -webkit-perspective: 200px; perspective: 200px;}.to-100-0-0 { -webkit-transform-origin: 100% 0 0; transform-origin: 100% 0 0;}.to-0-100-0 { -webkit-transform-origin: 0 100% 0; transform-origin: 0 100% 0;}
（学习视频分享：css视频教程）
以上就是css怎么旋转的详细内容。