CSS3 旋转rotate()rotatex()rotatey()应用实例

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

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

 

一、对象旋转语法规则

1、rotatex语法规则

rotatex(<angle>)

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

 

2、rotatey语法规则

rotatey(<angle>)

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

 

3、rotate语法规则

rotate(<angle>)

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

 

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

1、rotatex()应用实例

html代码：

<div class="rotatex">transform:rotatex(180deg);</div>

CSS样式：

.rotatex{transform:rotatex(180deg);border:1px solid #ab9595;width:200px;height:80px;background-color:#e3e2e0; padding:10px;}

效果图：

从效果图中可以看出，文字旋转了180度；如果把角度设为50deg，div 和 文字都没有旋转，而是被压扁了。

 

2、rotatey()应用实例

html代码：

<div class="rotatey">transform:rotatey(180deg);</div>

CSS样式：

.rotatey{transform:rotatey(60deg);border:1px solid #ab9595;width:200px;height:80px;background-color:#e3e2e0; padding:10px;}

效果图：

 

从图中可以看出，div 和文字被从水平方向压缩了，并没有旋转。

 

3、rotate()应用实例

html代码：

<div class="rotate">transform:rotatey(180deg);</div>

CSS样式：

.rotate{transform:rotate(60deg);border:1px solid #ab9595;width:200px;height:80px;background-color:#e3e2e0; padding:10px;}

效果图：

 

div 和文字都旋转了60度，是沿左下角的顶点旋转的。

 

 

三、CSS rotate 的扩展应用

1、旋转图片

html代码：

<div>
    <h4>旋转前：</h4>
    <img src="/images/rose.jpg" alt="旋转图片前" />
  </div>
  <div>
    <h4>旋转60度：</h4>
    <img src="/images/rose.jpg" alt="CSS rotate 旋转图片" class="rotateImg" />
  </div>

CSS样式：

.rotateImg{transform:rotate(60deg);border:1px solid #ab9595; margin:48px 0 0 16px;}

效果图：

 

2、当鼠标移到图片上时旋转它

html代码：

<div><img src="/images/rose.jpg" alt="CSS rotate 当鼠标移到上面时旋转图片" class="rotateImgOnHover" /></div>

CSS样式：

.rotateImgOnHover{ transition:0.2s ease-in-out; }
  .rotateImgOnHover:hover{cursor:pointer; transform:rotate(180deg);}

效果图：

 

3、旋转背景图

html代码：

<div>
    <div class="rotatedBackgroundImg90"><div></div><span>旋转背景图 90 度</span></div>
    <div class="rotatedBackgroundImg180"><div></div><span>旋转背景图 180 度</span>
  </div>

 

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代码：

 <div class="rotateText"><span>旋转文字</span></div>

CSS样式：

.rotateText{height:100px; width:200px; padding:8px; border:1px solid #ab9595; margin:10px 0 0 10px;}
  .rotateText span{display:block; transform:rotate(-30deg);}

效果图：