Home > Article > Web Front-end > HTML5 realizes 3D rotation effect of pictures

HTML5 realizes 3D rotation effect of pictures

王林forward: 2020-11-26 14:46:356612browse

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="../myWeb/素材/5cms.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

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：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Learn about the different storage types in browsersNext article：Learn about the different storage types in browsers

See more

HTML5 realizes 3D rotation effect of pictures

Related articles