css perspective 实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css perspective 实例 - 自学教程(runoops.com)</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: red;
            transform: rotateX(45deg);
            -webkit-transform: rotateX(45deg);
            /* Safari and Chrome */
        }
    </style>
    <script>
        function changePersp(value) {
            document.getElementById('div1').style.webkitPerspective = value;
            document.getElementById('persp').innerHTML = value;
        }

function changeOrgPersp() {
            var x = document.getElementById('operspx').value;
            var y = document.getElementById('operspy').value;
            document.getElementById('div1').style.webkitPerspectiveOrigin = x + '% ' + y + '%';
            document.getElementById('opersp').innerHTML = x + "% " + y + "%";
        }
    </script>
</head>

<div id="div1">
        <div id="div2">HELLO</div>
    </div>

Change perspective:<br>
    <input type="range" min="45" max="5000" value="200" onchange="changePersp(this.value)" /><br>
    webkit-perspective: <span id="persp"></span>;<br>
    <br>
    Change the Origins:<br>
    X-axis:<input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspx" /><br>
    Y-axis:<input type="range" min="-100" max="200" value="50" onchange="changeOrgPersp()" id="operspy" /><br>
    webkit-perspective-origin: <span id="opersp">50% 50%</span>;
</body>

</html>