介绍 & lt; html 类=?js csstransforms3d", lang=皕h"祝辞& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; meta http-equiv=癤-UA-Compatible",内容=癐E=边缘,chrome=1“祝辞,
,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
,& lt; title> CSS3 3 d 转换——旋转木马& lt;/title>
,& lt; link rel=皊tylesheet",类型=拔谋?css" https://www.yisu.com/zixun/, href=" http://www.htmleaf.com/pins/1412/201502062108/css/style.css " rel="外部nofollow”>
<风格媒体="屏幕">
.container {
宽度:210 px;
身高:140 px;
位置:相对;
保证金:50 px汽车40 px;
边界:1 px固体# CCC;
-webkit-perspective: 1100 px;
-moz-perspective: 1100 px;
-o-perspective: 1100 px;
角度:1100 px;
}
#旋转木马{
宽度:100%;
高度:100%;
位置:绝对的;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
传输格式:preserve-3d;
}
时#旋转木马{
-webkit-transition: -webkit-transform 1;
-moz-transition: -moz-transform 1;
-o-transition: -o-transform 1;
过渡:变换1;
}
#旋转木马。panels-backface-invisible图{
-webkit-backface-visibility:隐藏;
-moz-backface-visibility:隐藏;
-o-backface-visibility:隐藏;
backface-visibility:隐藏;
}
图{#旋转木马
显示:块;
位置:绝对的;
宽度:186 px;
身高:116 px;
左:10 px;
上图:10 px;
边界:2 px固体黑色;
行高:116 px;
字体大小:80 px;
粗细:大胆的;
颜色:白色;
text-align:中心;
}
时图{#旋转木马
-webkit-transition:透明度1 s, -webkit-transform 1 s;
-moz-transition:透明度1 s, -moz-transform 1 s;
-o-transition:透明度1 s, -o-transform 1 s;
过渡:透明度1 s,变换1 s;
}
#选项{
margin-top: 200 px;
宽度:100%;
text-align:中心;
}
#选项按钮{填充:0.5 em 1.5 em;边界:2 px固体# 6699 cc;背景:# fff;}>
这篇文章主要介绍了使用JavaScript怎么编写一个旋转木马效果,小编觉得不错,现在分享给大家,也给大家做个参考,一起跟随小编来看看吧!
<强>代码如下:
