HTML5 3D旋转图片相册

H5旋转3D相册，鼠标放置暂停，图片灰度级为0，有放大效果。

该实例运用H5和CSS3动画效果，未用javascript。提高了本人对CSS3 新属性的了解及掌握。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML5 3D旋转图片相册 可鼠标悬停</title><style>*{padding: 0;margin: 0;border: none;outline: none;box-sizing: border-box;}*:before,*:after{box-sizing: border-box;}html,body{min-height: 100%;}body{background-image: radial-gradient(mintcream 0%, lightgray 100%);;}.Container{margin: 4% auto;width: 210px;height: 140px;position: relative;perspective: 1000px;}#carousel{width: 100%;height: 100%;position: absolute;transform-style:preserve-3d;animation: rotation 20s infinite linear;}#carousel:hover{animation-play-state: paused;}#carousel figure{display: block;position: absolute;width: 220px;height: 120px;left: 10px;top: 10px;background: black;overflow: hidden;border: solid 5px black;}img{filter: grayscale(1);cursor: pointer;transition:all 0.3s ease 0s;width: 100%;height: 100%;}img:hover{filter: grayscale(0);transform: scale(1.2,1.2);}#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}#carousel figure:nth-child(2) { transform: rotateY(60deg) translateZ(288px);}#carousel figure:nth-child(3) { transform: rotateY(120deg) translateZ(288px);}#carousel figure:nth-child(4) { transform: rotateY(180deg) translateZ(288px);}#carousel figure:nth-child(5) { transform: rotateY(240deg) translateZ(288px);}#carousel figure:nth-child(6) { transform: rotateY(300deg) translateZ(288px);}@keyframes rotation{from{transform: rotateY(0deg);}to{transform: rotateY(360deg);}}</style>
</head>
<body><div class="Container"><div id="carousel"><figure><img src="../myWeb/素材/5cms.jpg" alt=""></figure><figure><img src="../myWeb/素材/5cms2.jpg" alt=""></figure><figure><img src="../myWeb/素材/5cms3.jpg" alt=""></figure><figure><img src="../myWeb/素材/5cms4.jpg" alt=""></figure><figure><img src="../myWeb/素材/5cms5.jpg" alt=""></figure><figure><img src="../myWeb/素材/5cms6.jpg" alt=""></figure></div></div>
</body>
</html

转载于:https://www.cnblogs.com/youth-dream/p/7780204.html

HTML5 3D旋转图片相册相关推荐

HTML5 3D立体图片相册
HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果.今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标多拽从多个角度浏览相册图片,点击图片,就可以 ...
php 图片 3d旋转图片,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
3d相册 html 代码_HTML5 3D立体图片相册
插件简介 HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果.今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标拖拽从多个角度浏览相册图片,点击图 ...
3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
html5把六张图片做成立方体,html5 3D旋转的图片立方体代码
特效描述:html53D 旋转的图片立方体.html5 css3转换属性创建3D旋转立方体多维数据图片库代码. 代码结构 1. HTML代码单击下面的图片来旋转立方体. //DOM load eve ...
JS实现3D旋转图片
想将图片3D旋转展示出来,如下图所示要想3D展示,需要在样式中设置 transform-style属性为preserve-3d,根据图片的数量计算旋转度数,给每一张图片设置上旋转角度,使图片展开围成 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...

HTML5 3D旋转图片相册

HTML5 3D旋转图片相册相关推荐

最新文章

热门文章