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

我们先来看一下实现效果：

（学习视频分享：ht ML 视频教程）

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

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

完整代码如下所示：

<!DOCTY PE  html>
<html>
<head>
    < ;m eta charset="UTF-8">
    <t IT le>HTML5 3D旋转图片相册 可鼠标悬停</title>
    <style>
        *{
            padding: 0;
            m arg in: 0;
            border: none;
            outline: none;
            box -s izing: border-box;
        }
        *:before,* :after {
            box-sizing: border-box;
        }
        html,body{
            min-h ei ght: 100%;
        }
        body{
            background -i mage: radial-gra die nt(mintcre am  0%, lightgray 100%);;
        }
        .Cont ai ner{
            mar gin : 4% auto;
            width: 210px;
            height: 140px;
            position: relative;
            perspective: 1000px;
        }
         # carousel{
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: PR eserve-3d;
            animation: rotation 20s infinite linear;
        }
        #carousel:hover{
            animation- play - stat e: 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(0 deg ) 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( 360 deg);
            }
        }
    </style>
</head>
<body>
    <div>
        <div id="carousel">
            <figure><img src=" .. /myWeb/素材/5 CMS . 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

总结

以上是为你收集整理的 html5实现图片的3D旋转效果全部内容，希望文章能够帮你解决 html5实现图片的3D旋转效果所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于html5实现图片的3D旋转效果的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did204422

更新时间：2023-04-30 阅读：17次