8-1 CSS3变形--旋转 rotate()
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3变形--旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示：

HTML代码：

<div class="wrapper">
  <div></div>
</div>

CSS代码：

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

演示结果

 

任务

在右侧CSS编辑器中第20-22行，补充正确的代码，将文本旋转回到原来水平位置。

效果图如下：

index.htmlstyle.css 
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8">
  5. <title>变形与动画</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head> 
  8. <body>
  9. <div class="wrapper">
  10.  <div><span>我不想旋转(^_^)</span></div>
  11. </div>
  12. </body>
  13. </html>
  1. .wrapper {
  2.   margin: 100px auto;
  3.   width: 300px;
  4.   height: 200px;
  5.   border: 2px dotted blue;
  6. }
  7.  
  8. .wrapper div{
  9.   width: 300px;
  10.   height: 200px;
  11.   line-height: 200px;
  12.   text-align: center;
  13.   background: green;
  14.   color: #fff;
  15.   -webkit-transform: rotate(-20deg);
  16.   -moz-transform: rotate(-20deg);
  17.   transform:rotate(-20deg);
  18. }
  19. .wrapper span {
  20.   display:block;
  21.  -webkit-transform: ?(20deg);
  22.  -moz-transform: ?(20deg);
  23.   transform:?(20deg);
  24.  }
下一节