css3 transform-style: preserve-3

作者: Ray_afab | 来源:发表于2020-07-19 12:39 被阅读0次

css3 transform-style: preserve-3
css3+js翻页效果三：书本翻页
css3 动画正方体手机旋转 animation
transform-style
css3--动画
3D颗粒效果翻转
CSS3 变形、过渡、动画
05、CSS3-3D变换和动画
课堂笔记
3d

<!doctype html>
<html>

<head>
    <title>标题</title>
    <meta charset="utf-8">
    <style>
        #stage {
            width: 800px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #333;
            /*perpective*/
            perspective: 780px;
        }

        #container {
            width: 800px;
            height: 400px;
            border: 1px solid red;
            transform: rotatex(-20deg) rotatey(0deg);
            position: relative;
            /*规定 子元素 按照3d位置摆放*/
            transform-style: preserve-3d;
        }

        #container div {
            width: 100px;
            height: 100px;
            background: #e4393c;
            /*绝对定位*/
            position: absolute;
            top: 150px;
            left: 350px;
        }

        #container div:nth-child(1) {
            transform: rotatey(0deg) translatez(200px);
        }

        #container div:nth-child(2) {
            transform: rotatey(60deg) translatez(200px);
        }

        #container div:nth-child(3) {
            transform: rotatey(120deg) translatez(200px);
        }

        #container div:nth-child(4) {
            transform: rotatey(180deg) translatez(200px);
        }

        #container div:nth-child(5) {
            transform: rotatey(240deg) translatez(200px);
        }

        #container div:nth-child(6) {
            transform: rotatey(300deg) translatez(200px);
        }
    </style>
</head>

<body>
    <div id="stage">
        <div id="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
    <script>
        console.log(container.style.transform);
        var adv = {
            deg: 0,
            singleRotate: function () {
                this.deg += 1;
                container.style.transform = "rotatex(" + this.deg + "deg) rotatey(" + this.deg + "deg)";
            },
            rotate: function () {
                setInterval(this.singleRotate.bind(this), 15);
            },
            danji: function () {
            }

        }
        adv.rotate();
    </script>
</body>

</html>