html3d旋转相册代码,html3d旋转相册具体制作过程

　　前一段时间，突然看到一个炫酷的三维(三维的缩写)旋转相册，这里记录一下，先看效果图：

　　HTML5代码如下：

　　！文档类型html html lang= en head meta charset= UTF-8 title html 5 3D旋转图片相册可鼠标悬停/title style text= text/CSS * { padding:0；边距：0;边框：无；大纲：无；框大小：边框-框；}*:之前，*:之后{框大小：边框-框；}html，body { min-height:100%；} body { background-image:径向渐变(薄荷色0%,浅灰色100%);}.集装箱{利润：4%自动；宽度：210像素高度：140像素位置：相对；视角：1000px} #旋转木马{宽度：100%;身高：100%;位置：绝对；变换样式：保留-3d；动画：旋转20s无限线性；} #旋转木马：悬停{动画-播放-状态：暂停；} #转盘图{显示：块；位置：绝对；宽度：220像素高度：120像素左：10 pxtop:10px；背景：黑色；溢出：隐藏；边框：纯色5px黑色；} img {滤镜：灰度(1);光标：指针；转场：全0.3秒缓0;宽度：100%;身高：100%;} img:悬停{滤镜：灰度(0);transform: scale(1.2，1.2)；} # carousel图：n-child(1){ transform:rotateY(0 deg)translate z(288 px)；} # carousel图：n-child(2){ transform:rotateY(60 deg)translate z(288 px)；} # carousel图：n-child(3){ transform:rotateY(120 deg)translate z(288 px)；} # carousel图：n-child(4){ transform:rotateY(180 deg)translate z(288 px)；} # carousel图：n-child(5){ transform:rotateY(240 deg)translate z(288 px)；} # carousel图：n-child(6){ transform:rotateY(300 deg)translate z(288 px)；} @关键帧旋转{ from { transform:rotateY(0 deg)；}到{转换：旋转(360度)；} }/style/headbody div class= Container div id= carousel figure img src= img/1。jpg alt= /figure figure img src= img/3。jpg alt= 图img src= img/4。jpg alt= /figure img src= img/5。jpg alt= /figure figure img src= alt= .以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。