旋转木马案例

关注

发布于: 2021 年 04 月 08 日

灵活应用 css3 可以在网页中形成漂亮灵动的效果，旋转木马便是这么一个综合案例，利用了动画，3d 旋转移动，透视，选择器的灵活使用来组成，其中的难点是 3d 思维，需要我们有充分的想象力，在立体图形的旋转变化里有思路，有利于我们更好地创造。

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>旋转木马</title>    <style>        body {            perspective: 1000px;        }                section {            position: relative;            width: 300px;            height: 200px;            margin: 100px auto;            transform-style: preserve-3d;            animation: rotate 10s linear infinite;            background: url(picture/lh.jpg) no-repeat;        }                @keyframes rotate {            0% {                transform: rotateY(0);            }            100% {                transform: rotateY(360deg);            }        }                section:hover {            animation-play-state: paused;        }                section div {            position: absolute;            left: 0;            top: 0;            width: 100%;            height: 100%;            background: url(picture/woman.jpg) no-repeat;        }                section div:nth-child(1) {            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)        }    </style></head>
<body>    <section>        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>    </section>
</body>
</html>