zoukankan      html  css  js  c++  java
  • HTML5

        前一段时间,突然看到一个炫酷的3D旋转相册,这里记录一下,先看效果图:

    HTML5 代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>HTML5 3D旋转图片相册 可鼠标悬停</title>
        <style text="text/css">
            * {
                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 class="Container">
            <div id="carousel">
                <figure><img src="img/1.jpg" alt=""></figure>
                <figure><img src="img/2.jpg" alt=""></figure>
                <figure><img src="img/3.jpg" alt=""></figure>
                <figure><img src="img/4.jpg" alt=""></figure>
                <figure><img src="img/5.jpg" alt=""></figure>
                <figure><img src="img/6.jpg" alt=""></figure>
            </div>
        </div>
    </body>
    
    </html>
  • 相关阅读:
    Python中的魔法方法【技能突破】
    Python简明教程:面向对象【新手必学】
    No such file or directory
    LaTeX Error: File ''picins.sty'' not Found.
    GCC编译过程中的各种not declared in this scope
    20.有效的括号-力扣
    c++标准库bitset文件
    c++标准库windows.h文件
    warning: control reaches end of non-void function
    c++标准库iostream文件
  • 原文地址:https://www.cnblogs.com/zhoux955792/p/11518627.html
Copyright © 2011-2022 走看看