CSS transform-origin使用


<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>CSS transform-origintitle>
    <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>

如图:

初始状态(黑点为中心原点)
CSS transform-origin使用_第1张图片
最终状态
CSS transform-origin使用_第2张图片
量角器度量正好是45度
CSS transform-origin使用_第3张图片

你可能感兴趣的:(HTML5+CSS,CSS3)