H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果。
该实例运用H5和CSS3动画效果,未用javascript。提高了本人对CSS3 新属性的了解及掌握。
完整代码如下:
<title>HTML5 3D旋转图片相册 可鼠标悬停</title> background-image: radial-gradient(mintcream 0%, lightgray 100%);; transform-style:preserve-3d; animation: rotation 20s infinite linear; animation-play-state: paused; transition:all 0.3s ease 0s; 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);} transform: rotateY(0deg); transform: rotateY(360deg); <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>
|