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:80px;background-color:#e3e2e0; padding:10px;}
效果图：
transform:rotatex(180deg);
从效果图中可以看出，⽂字旋转了180度；如果把⾓度设为50deg，div 和 ⽂字都没有旋转，⽽是被压扁了。
2、rotatey()应⽤实例
html代码：
transform:rotatey(180deg);
CSS样式：
.rotatey{transform:rotatey(60deg);border:1px solid #ab9595;width:200px;height:80px;background-color:#e3e2e0; padding:10px;}
css特效文字
效果图：
transform:rotatey(180deg);
从图中可以看出，div 和⽂字被从⽔平⽅向压缩了，并没有旋转。
3、rotate()应⽤实例
html代码：
transform:rotatey(180deg);
CSS样式：
.rotate{transform:rotate(60deg);border:1px solid #ab9595;width:200px;height:80px;background-color:#e3e2e0; padding:10px;}
效果图：
transform:rotatey(180deg);
div 和⽂字都旋转了60度，是沿左下⾓的顶点旋转的。
三、CSS rotate 的扩展应⽤
1、旋转图⽚
html代码：
旋转前：
旋转60度：
CSS样式：
.rotateImg{transform:rotate(60deg);border:1px solid #ab9595; margin:48px 0 0 16px;}
效果图：
2、当⿏标移到图⽚上时旋转它
html代码：
CSS样式：
.rotateImgOnHover{ transition:0.2s ease-in-out; }
.rotateImgOnHover:hover{cursor:pointer; transform:rotate(180deg);}
效果图：
3、旋转背景图
html代码：
旋转背景图 90 度
旋转背景图 180 度
CSS样式：
.rotatedBackgroundImg90{overflow:hidden;}
.rotatedBackgroundImg90 div{height:250px; width:250px; padding:6px;background-image:url('/images/rose-bg.jpg'); background-repeat:no-repeat; margin-top:10px; transform:rotate(90deg);}
.rotatedBackgroundImg90 span{display:block; position:relative; float:left; margin:-256px 0 0 68px; color:#ff0000; z-index:1;}
.rotatedBackgroundImg180{overflow:hidden; margin-top:10px;}
.rotatedBackgroundImg180 div{height:200px; width:267px; background-image:url('/images/rose-bg.jpg'); background-repeat:no-repeat; margin-top:10px; transform:rotate(180deg);}
.
rotatedBackgroundImg180 span{display:block; position:relative; float:left; margin:-196px 0 0 8px; color:#ff0000; z-index:1;}
效果图：
如果要逆时针旋转 90 度，只需把 90deg 改为 -90deg，其它的以此类推。
4、旋转⽂字
html代码：
旋转⽂字
CSS样式：
.rotateText{height:100px; width:200px; padding:8px; border:1px solid #ab9595; margin:10px 0 0 10px;} .rotateText span{display:block; transform:rotate(-30deg);}
效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。