网站（十五）CSS使用变换

最新推荐文章于 2024-07-14 12:36:02 发布

KeithAlexander

最新推荐文章于 2024-07-14 12:36:02 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/KeithAlexander/article/details/80974062

学习笔记专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用CSS中的变换属性来改变元素的外观。通过具体示例展示了如何利用rotate旋转和scale缩放等变换方法，并设置变换的起源点，实现丰富的视觉效果。

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

CSS使用变换

transform
- rotate：旋转角度
- scale：倍数
  - scalex
  - scaley
- origin：中心点坐标
  - px,px
  - top right left bottom

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <style type="text/css">
        p {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        p:hover{
            /*width: 100px;
            height: 100px;*/
            background-color: antiquewhite;
            /*transform:rotate(-30deg);*/
            transform-origin: top right;
            transform:scale(1.5);
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>