HTML5 realizes 3D rotation effect of pictures-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 realizes 3D rotation effect of pictures

王林

Nov 26, 2020 pm 02:46 PM

3d rotation html5 picture

HTML5 realizes 3D rotation effect of pictures

Let’s take a look at the implementation effect first:

HTML5 realizes 3D rotation effect of pictures

(Learning video sharing: html video tutorial)

H5 rotates the 3D photo album, pauses when the mouse is placed, the gray level of the picture is 0, and there is a magnification effect.

This example uses H5 and CSS3 animation effects, without using javascript. Improved my understanding and mastery of the new properties of CSS3.

The complete code is as follows:

<!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

Copy after login

Related recommendations: h5

The above is the detailed content of HTML5 realizes 3D rotation effect of pictures. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn