Web速查-索引

transform-origin

定义

transform-Origin属性允许更改转换元素的位置。

注意：2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。使用此属性必须先使用transform 属性。

语法

transform-origin: x-axis y-axis z-axis;

属性值

值 说明
x-axis 定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%
y-axis 定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%
z-axis 定义视图被置于 Z 轴的何处。可能的值：length

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>

    <style>

        #div1

        {

            position: relative;

            height: 200px;

            width: 200px;

            margin: 50px;

            padding:10px;

            border: 1px solid black;

        }

        #div2

        {

            padding:50px;

            position: absolute;

            border: 1px solid black;

            background-color: green;

            transform: rotate(45deg);

            transform-origin:20% 40%;

            /* IE 9 */

            -ms-transform: rotate(45deg);

            /* IE 9 */

            -ms-transform-origin:20% 40%;

            /* Safari and Chrome */

            -webkit-transform: rotate(45deg);

            /* Safari and Chrome */

            -webkit-transform-origin:20% 40%;

            /* Firefox */

            -moz-transform: rotate(45deg);

            /* Firefox */

            -moz-transform-origin:20% 40%;

        }

    </style>

    <script>

        function changeRot(value)

        {

            document.getElementById('div2').style.transform="rotate(" + value + "deg)";

            document.getElementById('div2').style.msTransform="rotate(" + value + "deg)";

            document.getElementById('div2').style.webkitTransform="rotate(" + value + "deg)";

            document.getElementById('div2').style.MozTransform="rotate(" + value + "deg)";

            document.getElementById('div2').style.OTransform="rotate(" + value + "deg)";

            document.getElementById('persp').innerHTML=value + "deg";

        }

        function changeOrg()

        {

            var x=document.getElementById('ox').value;

            var y=document.getElementById('oy').value;

            document.getElementById('div2').style.transformOrigin=x + '% ' + y + '%';

            document.getElementById('div2').style.msTransformOrigin=x + '% ' + y + '%';

            document.getElementById('div2').style.webkitTransformOrigin=x + '% ' + y + '%';

            document.getElementById('div2').style.MozTransformOrigin=x + '% ' + y + '%';

            document.getElementById('div2').style.OTransformOrigin=x + '% ' + y + '%';

            document.getElementById('origin').innerHTML=x + "% " + y + "%";

        }

    </script>

</head>

<body>

    <p>尝试通过改变x，y，z轴改变绿色区块</p>

    <div id="div1">

        <div id="div2">1</div>

    </div>

    Rotate:

    <input type="range" min="-360" max="360" value="45" onchange="changeRot(this.value)" />

    transform: rotateY:(<span id="persp">45deg</span>);

    <br><br>

    X-axis:<input type="range" min="-100" max="200" value="20" onchange="changeOrg()" id="ox" /><br>

    Y-axis:<input type="range" min="-100" max="200" value="40" onchange="changeOrg()" id="oy" />

    transform-origin: <span id="origin">20% 40%</span>;

</body>

</html>

尝试通过改变x，y，z轴改变绿色区块

1
Rotate: transform: rotateY:(45deg);

X-axis:
Y-axis: transform-origin: 20% 40%;

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari Chrome FireFox IE
4.0 12.0 10.0 10.0