网站模板源码,网站seo博客,网络规划设计师有用吗,百度极速版免费下载安装我们先来看一下实现效果#xff1a;(学习视频分享#xff1a;html视频教程)H5旋转3D相册#xff0c;鼠标放置暂停#xff0c;图片灰度级为0#xff0c;有放大效果。该实例运用H5和CSS3动画效果#xff0c;未用javascript。提高了本人对CSS3 新属性的了解及掌握。完整代码…我们先来看一下实现效果(学习视频分享html视频教程)H5旋转3D相册鼠标放置暂停图片灰度级为0有放大效果。该实例运用H5和CSS3动画效果未用javascript。提高了本人对CSS3 新属性的了解及掌握。完整代码如下所示HTML5 3D旋转图片相册 可鼠标悬停*{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);}} 相关推荐h5
