详解54 transform: rotate()；

最新推荐文章于 2024-08-18 20:43:47 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-08-18 20:43:47 发布

阅读量752

点赞数 1

分类专栏： CSS3最详解

本文链接：https://blog.csdn.net/qq_37805832/article/details/108113650

版权

CSS3最详解专栏收录该内容

54 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div
     /*核心:这些都是以div正中心开始旋转的.仔细看看文字,记住每一个文字开始都是在左上角为0deg。
    你可以理解四个角是0deg  90deg   180deg   270deg,注意一下原点旋转一周30deg，也是开始的原点.
    */
    {
      width: 200px;
      height: 200px;
      border: 3px solid red;
      background: yellow;
      margin: 100px auto;
    }
    .box1
    {
      transform: rotate(30deg);
    }
    .box2
    {
      transform: rotate(90deg);
    }
    .box3
    {
      transform: rotate(120deg);
    }
    .box4{
      -webkit-transform:rotate(180deg);
              transform:rotate(180deg);
    }
    .box5{
      -webkit-transform:rotate(270deg);
              transform:rotate(270deg);
    }
    .box6{
      -webkit-transform:rotate(360deg);
              transform:rotate(360deg);
    }
    .box7
    {
      transform: rotate(-45deg);/*逆时针旋转45deg*/
    }
  </style>
</head>
<body>
  <div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
<div class="box8">box8</div>
<div class="box9">box9</div>
<div class="box10">box10</div>

</body>
</html>