HTML5 3D旋转相册的实现示例

前一段时间，突然看到一个炫酷的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>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！