CSS transform-origin使用

最新推荐文章于 2025-10-17 18:32:25 发布

转载最新推荐文章于 2025-10-17 18:32:25 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

HTML5+CSS|CSS3 专栏收录该内容

159 篇文章

订阅专栏

本文通过一个实例详细解析了CSS中的transform-origin属性如何定义元素旋转、缩放或倾斜的原点，展示了通过设置不同坐标值来改变元素转换效果的方法。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>CSS transform-origin</title>
    <meta name="author" content="" />
    <meta name="copyright" content="" />
    <style>
        .test {
            margin: 0;
            padding: 0;
            list-style: none;
            border: 1px solid #000;
        }

            .test li {
                width: 50px;
                height: 50px;
                border: 1px solid #000;
                background: #ddd;
                -moz-transform-origin: 50px 200px;
                -moz-transform: rotate(45deg);
                -webkit-transform-origin: 50px 200px;
                -webkit-transform: rotate(45deg);
                -o-transform-origin: 50px 200px;
                -o-transform: rotate(45deg);
                -ms-transform-origin: 50px 200px;
                -ms-transform: rotate(45deg);
                transform-origin: 50px 200px;
                transform: rotate(45deg);
            }
    </style>
    <script type="text/javascript">
        window.addEventListener('load', mInit, false);

        function newEl(tag) { return document.createElement(tag); }
        function newTxt(txt) { return document.createTextNode(txt); }

        function mInit() {

            //标记旋转元素的(接近)中心原点位置
            var txt = newTxt("●");
            var span = newEl('span');
            span.appendChild(txt);

            span.style.left = 50 + "px";
            span.style.top = 200 + "px";
            span.style.zIndex = 99;
            span.style.position = 'absolute';

            var test = document.getElementsByClassName('test')[0];
            test.appendChild(span);
        }

    </script>
</head>
<body>
    <ul class="test">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>