css3transform--2D篇--rotate

最新推荐文章于 2023-08-13 21:15:14 发布

夏末终秋凉

最新推荐文章于 2023-08-13 21:15:14 发布

阅读量653

点赞数

分类专栏： html css 技术天地文章标签： css html web 前端 css3

本文链接：https://blog.csdn.net/qq545698514/article/details/53606220

版权

css 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

技术天地

6 篇文章 0 订阅

订阅专栏

说起css3，不得不提css3的维度模块（字我也不晓得写错没），维度比较简单，就是一个transform，但是呢，该属性对应的值却不少。

首当其冲的是rotate(XXdeg) ，该值表示元素在平面旋转的度数，也就是定义2D旋转，不过需要注意的是默认是在Z轴进行旋转的。

如果希望在X轴或是Y轴进行旋转，则可以用rotateX（xxdeg）、rotateY（xxdeg）。

坐标系如图：

话不多说，以Z轴为例进行说明，代码献上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotate</title>
    <style>
        *{ padding: 0; margin: 0;}
        div{
            margin:100px auto;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认样式：

当在div选择器中加入transform:rotate(60deg)后再看看效果：

贴一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotate</title>
    <style>
        *{ padding: 0; margin: 0;}
        div{
            margin:100px auto;
            width: 100px;
            height: 100px;
            background-color: #f00;
            transform: rotate(60deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

夏末终秋凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3transform--2D篇--rotate

说起css3，不得不提css3的维度模块（字我也不晓得写错没），维度比较简单，就是一个transform，但是呢，该属性对应的值却不少。首当其冲的是rotate(XXdeg) ，该值表示元素在平面旋转的度数，也就是定义2D旋转。
复制链接

扫一扫