js实现旋转木马效果
(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
效果图：
代码如下：
<html class=" js csstransforms3d" lang="zh"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 3D transforms-旋转木马</title>
<link rel="stylesheet" type="text/css" href="http://www.htmleaf.com/pins/1412/201502062108/css/style.css" rel="external nofollow" >
<style media="screen">
.container {
width: 210px;
height: 140px;
position: relative;
margin: 50px auto 40px;
border: 1px solid #CCC;
-webkit-perspective: 1100px;
-moz-perspective: 1100px;
-o-perspective: 1100px;
perspective: 1100px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ready #carousel {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
#carousel.panels-backface-invisible figure {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#carousel figure {
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
border: 2px solid black;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
.ready #carousel figure {
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s, -moz-transform 1s;
-o-transition: opacity 1s, -o-transform 1s;
transition: opacity 1s, transform 1s;
}
#options{
margin-top: 200px;
width: 100%;
text-align: center;
}
#options button{padding: 0.5em 1.5em;border: 2px solid #6699cc;background: #fff;}
</style>
<!--[if IE]>
<script src="/UploadFiles/2021-04-02/html5shiv.min.js">
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
下一篇：jQuery实现验证码功能