黑马程序员技术交流社区

标题: 【成都校区】 [打印本页]

---

作者: cyberpunkjill    时间: 2019-9-25 22:11
标题: 【成都校区】
body {
            perspective: 2000px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
            animation: zhuan .0001s linear infinite;
        }
        
        @keyframes zhuan {
            0% {}
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(img/dog.jpg) no-repeat;
        }
        
        section div:first-child {
            transform: translateZ(300px);
        }
        
        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2