css3+html5实现旋转木马

谁可共你比99

于 2022-08-29 20:07:29 发布

阅读量225

点赞数

文章标签： css3 html5 前端

本文链接：https://blog.csdn.net/m0_57023359/article/details/126591843

版权

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box{

position: relative;

width: 300px;

height: 200px;

margin: 150px auto;

animation: run 5s linear infinite;

transform-style: preserve-3d;

}

.box:hover{

animation-play-state: paused;

}

.box div{

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

}

.box div img{

height: 100%;

width: 100%;

}

.box div:nth-child(1){

transform: rotateY(45deg) translateZ(450px);

}

.box div:nth-child(2){

transform: rotateY(90deg) translateZ(450px);

}

.box div:nth-child(3){

transform: rotateY(135deg) translateZ(450px);

}

.box div:nth-child(4){

transform: rotateY(180deg) translateZ(450px);

}

.box div:nth-child(5){

transform: rotateY(225deg) translateZ(450px);

}

.box div:nth-child(6){

transform: rotateY(270deg) translateZ(450px);

}

.box div:nth-child(7){

transform: rotateY(315deg) translateZ(450px);

}

.box div:nth-child(8){

transform: rotateY(360deg) translateZ(450px);

}

@keyframes run{

from {

transform: rotateY(0deg);

}

to {

transform: rotateY(360deg);

}

</style>

</head>

<body>

</section>

</body>

</html>

谁可共你比99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3+html5实现旋转木马

利用css3写的旋转木马，有需要自取
复制链接

扫一扫

css3+html5实现旋转木马

“相关推荐”对你有帮助么？