慕课网

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行，补充正确的代码，将文本旋转回到原来水平位置。

效果图如下：

?不会了怎么办: 思考一下，我们刚讲过的旋转属性

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

8-1 CSS3变形--旋转 rotate()

CSS3变形--旋转 rotate()

任务

写笔记

收藏课程后，能更快找到我哦～