<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> body { perspective: 1000px; /*给父级添加透视，因为section 需要旋转，所以给body加透视 */ } @keyframes move { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } section { position: relative; width: 300px; height: 200px; margin: 100px auto; transform-style: preserve-3d; /*给子元素添加动画效果*/ animation: move 6s linear infinite; } section:hover { cursor: pointer; animation-play-state: paused; /*暂停动画*/ } section div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } div:nth-child(1) { background: coral; transform: translateZ(300px); } div:nth-child(2) { background: cadetblue; transform: rotateY(60deg) translateZ(300px); } div:nth-child(3) { background: pink; transform: rotateY(120deg) translateZ(300px); } div:nth-child(4) { background: peru; transform: rotateY(180deg) translateZ(300px); } div:nth-child(5) { background: plum; transform: rotateY(240deg) translateZ(300px); } div:nth-child(6) { background: palegreen; transform: rotateY(300deg) translateZ(300px); } </style> </head> <body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body> </html>
案例-3D旋转木马
猜你喜欢
转载自www.cnblogs.com/qtbb/p/11758006.html
今日推荐
周排行