CSS笔记-2D转换：移动、旋转、缩放

原创于 2021-03-23 17:02:46 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在CSS中使用2D转换功能，包括元素的旋转、平移和缩放效果，并通过实例演示了:hover伪类实现交互式动画。

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

文章目录

前言
一、演示
二、代码
总结

前言

CSS笔记-2D转换：移动、旋转、缩放

一、演示

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .rotate{
      transition: all .4s;
    }
    .rotate:hover{
      transform: rotate(180deg);
    }
    .comprehensive{
      width: 100px;
      height: 100px;
      background-color: greenyellow;
      transition: all .4s;
    }
    .comprehensive:hover{
      /* 综合写法   translate必须在rotate前面,效果才会正确 */
      transform: translate(100px, 100px) rotate(180deg) scale(1.2);
    }
  </style>
</head>
<body>
<!-- 旋转 -->
<div>
  <img src="../img/gear.png" alt="" class="rotate">
</div>
<!-- 综合写法 -->
<div>
  <div class="comprehensive"></div>
</div>
</body>
</html>