css transform_rotateZ(a).html

最新推荐文章于 2022-11-14 10:53:38 发布

学无止境慢慢来

最新推荐文章于 2022-11-14 10:53:38 发布

阅读量198

点赞数

分类专栏： CSS

原文链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotateZ

版权

CSS 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css transform_rotateZ(a)</title>
    <style>
        /*参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotateZ
        知识点：
            1.rotateZ(a)
                定义了一个转换，它可以让一个元素围绕 Z 轴旋转，而不会对其进行变形。
                它的结果是一个<transform-function>数据类型。
                旋转轴围绕原点旋转，而这个原点通过 transform-origin 属性来定义。
                a，是一个 <angle> ，表示旋转的角度。
                正数角度表示顺时针旋转，负数则表示逆时针旋转。

                应用示例：
                    transform: rotateZ(0);
                    transform: rotateZ(90deg);  // 度。
                    transform: rotateZ(-0.25turn);  // 逆时针旋转0.25转。
                    transform: rotateZ(3.142rad);  // 弧度。
                注意:
                    1.rotateZ(a) 相当于 rotate(a) or rotate3d(0, 0, 1, a)。
                    2.与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。
                        换句话说，三维旋转的应用顺序，将会影响最终结果。
        */
        div {
            width: 80px;
            height: 80px;
            background-color: skyblue;
        }

        .rotated {
            transform: rotateZ(45deg);
            background-color: pink;
        }
    </style>
</head>
<body>
<div>Normal</div>
<div class="rotated">Rotated</div>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css transform_rotateZ(a).html

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>rotateZ</title> <style> /*参考：https://developer.mozilla.org/zh-CN/do...
复制链接

扫一扫