transform旋转木马

本文主要是介绍transform旋转木马，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML代码：

<div class="father"><img src="images/bread3.png" alt="">
</div>
<section><div></div><div></div><div></div><div></div><div></div><div></div>
</section>

CSS代码：

body {perspective: 1000px;
}
.father {width: 167px;height: 180px;margin: 0 auto;border: 5px solid red;transform: rotateY(30deg);transform-style: preserve-3d;
}
.father img {border: 5px solid blue;transform: rotateY(30deg);
}
section {width: 170px;height: 170px;margin: 100px auto;background: url(images/bread1.png) no-repeat;-webkit-background-size: cover;background-size: cover;position: relative;transform-style: preserve-3d;transition: all 5s linear;}
section:hover {transform: rotateY(360deg);
}
section div {width: 100%;height: 100%;background: url(images/bread2.png) no-repeat;-webkit-background-size: cover;background-size: cover;position: absolute;top: 0;left: 0;
}
section div:nth-child(1) {transform: rotateY(0deg) translateZ(200px);
}
section div:nth-child(2) {transform: rotateY(60deg) translateZ(200px);
}
section div:nth-child(3) {transform: rotateY(120deg) translateZ(200px);
}
section div:nth-child(4) {transform: rotateY(180deg) translateZ(200px);
}
section div:nth-child(5) {transform: rotateY(240deg) translateZ(200px);
}
section div:nth-child(6) {transform: rotateY(300deg) translateZ(200px);
}

实现效果：

这篇关于transform旋转木马的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---