css transform-origin 转换原点.html_transform origin表示z轴

作者：编程变革者 | 2024-02-05 09:58:37

踩

transform origin表示z轴

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css transform-origin 转换原点</title>
    <style>
        /*参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
        知识点：
            1.转换原点，是指对元素进行转换（包括旋转、缩放等）时，固定不动的那个点。
                默认的转换原点在元素的中心。
            2.transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。
                没有明确定义的偏移将重置为其对应的初始值。
            3.如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，
                则第一个值表示水平偏移量，第二个值表示垂直偏移量。
            4.值的个数。
                一个值：
                    必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
                两个值：
                    其中一个必须是<length>，<percentage>，或left, center, right关键字中的一个。
                    另一个必须是<length>，<percentage>，或top, center, bottom关键字中的一个。
                三个值：
                    前两个值和只有两个值时的用法相同。
                    第三个值必须是<length>。它始终代表Z轴偏移量。
            5.值
                x-offset
                    定义变形中心距离盒模型的左侧的<length>或<percentage>偏移值。
                offset-keyword
                    left，right，top，bottom或center中之一，定义相对应的变形中心偏移。
                y-offset
                    定义变形中心距离盒模型的顶的<length>或<percentage>偏移值。
                x-offset-keyword
                    left，right或center中之一，定义相对应的变形中心偏移。
                y-offset-keyword
                    top，bottom或center中之一，定义相对应的变形中心偏移。
                z-offset
                    定义变形中心距离用户视线（z=0屏幕处）的<length>（不能是<percentage>）偏移值。
                    我猜：z>0,靠近用户，z<0,远离用户。
                关键字是方便的简写方法，等同于以下<percentage>值：
                keyword    value
                left   0%
                center 50%
                right  100%
                top    0%
                bottom 100%*/
        * {
            margin: 0;
            padding: 0;
        }

        #d1 {
            width: 100px;
            height: 100px;
            background: rgb(152, 251, 152);
            border: 1px solid black;
            /*transform: none;!*1.默认*!*/
            /*transform: rotate(30deg);!*2.顺时针转30度。*!*/
            /*transform: rotate(30deg);!*3.指定盒模型的左上角为转换原点。*!*/
            /*transform-origin: 0 0;*/
            /*transform: rotate(30deg);!*4.指定盒模型的右下角为转换原点。*!*/
            /*transform-origin: 100% 100%;*/
            /*transform: rotate(30deg);!*5.指定元素外部，左上位置为转换原点。*!*/
            /*transform-origin: -1em -3em;*/
            /*transform: scale(1.7);!*6.放大到原来的1.7倍。*!*/
            /*transform: scale(1.7);!*7.以左上角为转换原点放大。*!*/
            /*transform-origin: 0 0;*/
            /*transform: scale(1.7);!*8.以元素外部右上侧为转换原点进行放大。*!*/
            /*transform-origin: 100% -30%;*/
            /*transform: skewX(45deg);!*9.以元素外部右上侧为转换原点，竖直边由+y向+x方向倾斜 50 度。*!*/
            /*transform-origin: 100% -30%;*/
            transform: skewY(50deg);/*10.水平边由+x向+y方向倾斜50度。*/
            transform-origin: left top;
        }
    </style>
</head>
<body>
<div id="d1"></div>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/编程变革者/article/detail/60330