html中坐标轴旋转角度,CSS3 旋转rotate()rotatex()rotatey()应用实例

CSS3中，对象转换有多种方式，其中一种为旋转rotate()，主要是围绕X轴或Y轴旋转，所以rotate()又要细分为rotatex()和rotatey()，前者用于设置对象围绕X轴旋转，后者用于设置对象围绕Y轴旋转。

rotate既可控制对象作2D旋转，又可控制对象作3D旋转，本篇先介绍作2D旋转的语法规则和应用实例，后续篇章再介绍作3D旋转的情况。下面先看rotatex()、rotatey()和rotate()语法规则，然后再看它们的应用实例。

一、对象旋转语法规则

1、rotatex语法规则

rotatex()

rotatex 设置对象沿X轴旋转，表达式中的 angle，是设置对象绕X轴旋转的角度，如 50deg。

2、rotatey语法规则

rotatey()

rotatey设置对象沿Y轴旋转，angle 是设置对象绕Y轴旋转的角度，如 80deg，同样不能设置为90deg，否则值无效。

3、rotate语法规则

rotate()

rotate也只能设置一个角度，不能同时设置既绕X轴旋转，又绕Y轴旋转。

二、rotatex()、rotatey()和rotate()应用实例

1、rotatex()应用实例

html代码：

transform:rotatex(180deg);

CSS样式：

.rotatex{transform:rotatex(180deg);border:1px solid #ab9595;width:200px;height:80