html5怎么实现图片的3D旋转效果

本篇内容主要讲解“html5怎么实现图片的3D旋转效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5怎么实现图片的3D旋转效果”吧!
　　完整代码如下所示：
　　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:a免费云主机域名ll 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);
　　}
　　}到此，相信大家对“html5怎么实现图片的3D旋转效果”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: html中标签有什么用

这篇文章将为大家详细讲解有关html中什么是script标签?script标签通常放置在一个网页的头部标签head标签内的用于链接外部JS文件外部资源标签，标签最常见的用途是链接外部js，外部资源。script实例script使用实例演示链接外部JS时候sc…