CSS3样式过渡加旋转的应用案例

最新推荐文章于 2022-05-28 19:12:48 发布

原创最新推荐文章于 2022-05-28 19:12:48 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html

HTML作业专栏收录该内容

8 篇文章

订阅专栏

这篇博客展示了如何使用CSS3的`transform`和`transition`属性来创建盒子的旋转和过渡效果。通过设置`width`、`height`、`border`、`overflow`和`float`属性，使多个盒子并排显示。当鼠标悬停在盒子上时，应用`rotate`和`transform-origin`改变其旋转角度，并通过`transition`平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 150px;
      height: 150px;
      border: #6eeabb 3px solid;
      margin: 10px 10px;
      overflow: hidden;     /*隐藏溢出*/
      float: left;          /*添加浮动，盒子并排*/
    }
    
    div::after{
      content: "";
      display: block;           /*盒子默认位行元素，更换为块元素*/
      width: 150px;
      height: 150px;
      background-color: #a5f5cd;
      transform: rotate(180deg);    /*旋转角度*/
      transform-origin: left bottom;    /*旋转位置*/
      transition: all .5s;          /*过渡效果*/
    }
    div:hover::after{
      transform: rotate(0rad);      /*鼠标放上时的效果*/
    }
  </style>

</head>
<body>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</body>
</html>