CSS transform-origin使用

最新推荐文章于 2024-07-07 13:22:35 发布

.NET跨平台

最新推荐文章于 2024-07-07 13:22:35 发布

阅读量360

点赞数

分类专栏： HTML5+CSS|CSS3

原文链接：https://blog.csdn.net/WuLex

版权

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

153 篇文章 10 订阅

订阅专栏

<!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>

如图:

初始状态(黑点为中心原点)
在这里插入图片描述
最终状态

量角器度量正好是45度

.NET跨平台

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>
复制链接

扫一扫

专栏目录