HTML5 réalise un effet de rotation 3D des images-Tutoriel H5-php.cn

HTML5 réalise un effet de rotation 3D des images

王林

Libérer： 2020-11-26 14:46:35

avant

6715 Les gens l'ont consulté

HTML5 réalise un effet de rotation 3D des images

Jetons d'abord un coup d'œil à la mise en œuvre :

HTML5 réalise un effet de rotation 3D des images

(Partage vidéo d'apprentissage : tutoriel vidéo HTML )

H5 fait pivoter l'album photo 3D, fait une pause lorsque la souris est placée, le niveau de gris de l'image est de 0 et il y a un effet de grossissement.

Cet exemple utilise des effets d'animation H5 et CSS3, sans utiliser de javascript. Amélioration de ma compréhension et de ma maîtrise des nouvelles propriétés de CSS3.

Le code complet est le suivant :

<!DOCTYPE html>
<html>
<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>
        <div id="carousel">
            <figure><img src="/static/imghw/default1.png"  data-src="../myWeb/素材/5cms.jpg"  class="lazy"   alt=""></figure>
            <figure><img src="/static/imghw/default1.png"  data-src="../myWeb/素材/5cms2.jpg"  class="lazy"   alt=""></figure>
            <figure><img src="/static/imghw/default1.png"  data-src="../myWeb/素材/5cms3.jpg"  class="lazy"   alt=""></figure>
            <figure><img src="/static/imghw/default1.png"  data-src="../myWeb/素材/5cms4.jpg"  class="lazy"   alt=""></figure>
            <figure><img src="/static/imghw/default1.png"  data-src="../myWeb/素材/5cms5.jpg"  class="lazy"   alt=""></figure>
            <figure><img src="/static/imghw/default1.png"  data-src="../myWeb/素材/5cms6.jpg"  class="lazy"   alt=""></figure>
        </div>
    </div>
</body>
</html

Copier après la connexion

Recommandations associées : h5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!