使用 CSS3 transform 属性，你可以给任何元素加上“变形。
transform 属性设置属性值 rotate transform: rotate(30deg) 为进行元素2d旋转，其值为deg(度数)rotate(30deg)，或是几圈turn(几圈)rotate(1turn)，可以配合perspective进行景深操作,其相对的3d旋转属性为rotateX与rotateY。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.sky{width: 200px;height: 200px;color: chartreuse;background: skyblue;transition: 1s;}.sky:hover{transform: rotate(360deg);}</style></head><body><div class="sky"></div></body>
</html>
按照度数旋转
2D顺时针旋转transform: rotate(360deg);
2D逆时针旋转transform: rotate(-360deg);
按照圈数旋转
2D顺时针旋转transform: rotate(1turn);
2D逆时针旋转transform: rotate(-1turn);
3D旋转效果
3D效果 X轴旋转 transform: perspective(800px) rotateX(360deg);
3D效果 Y轴旋转 transform: perspective(800px) rotateY(360deg);
