纯CSS3实现的3D画展（图片展览）

CSS 3D Carousel，原先使用jQuery费老大劲实现的3D轮播，用CSS3 transform轻松搞定。

css3, 3d, slider

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2693
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@-webkit-keyframes turn {
    50% {
        -webkit-transform: rotateX(5deg) rotateY(0.5turn);
        -ms-transform: rotateX(5deg) rotateY(0.5turn);
        transform: rotateX(5deg) rotateY(0.5turn);
    }
    100% {
        -webkit-transform: rotateX(-5deg) rotateY(1turn);
        -ms-transform: rotateX(-5deg) rotateY(1turn);
        transform: rotateX(-5deg) rotateY(1turn);
    }
}
@-moz-keyframes turn {
    50% {
        -webkit-transform: rotateX(5deg) rotateY(0.5turn);
        -ms-transform: rotateX(5deg) rotateY(0.5turn);
        transform: rotateX(5deg) rotateY(0.5turn);
    }
    100% {
        -webkit-transform: rotateX(-5deg) rotateY(1turn);
        -ms-transform: rotateX(-5deg) rotateY(1turn);
        transform: rotateX(-5deg) rotateY(1turn);
    }
}
@-o-keyframes turn {
    50% {
        -webkit-transform: rotateX(5deg) rotateY(0.5turn);
        -ms-transform: rotateX(5deg) rotateY(0.5turn);
        transform: rotateX(5deg) rotateY(0.5turn);
    }
    100% {
        -webkit-transform: rotateX(-5deg) rotateY(1turn);
        -ms-transform: rotateX(-5deg) rotateY(1turn);
        transform: rotateX(-5deg) rotateY(1turn);
    }
}
@keyframes turn {
    50% {
        -webkit-transform: rotateX(5deg) rotateY(0.5turn);
        -ms-transform: rotateX(5deg) rotateY(0.5turn);
        transform: rotateX(5deg) rotateY(0.5turn);
    }
    100% {
        -webkit-transform: rotateX(-5deg) rotateY(1turn);
        -ms-transform: rotateX(-5deg) rotateY(1turn);
        transform: rotateX(-5deg) rotateY(1turn);
    }
}
body {
    margin: 0;
    overflow: hidden;
    background: #000;
}
body .container {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-perspective: 700px;
    -ms-perspective: 700px;
    perspective: 700px;
}
body .container .carousel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140px;
    height: 97px;
    margin-left: -70px;
    margin-top: -48.5px;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-5deg) rotateY(0);
    -ms-transform: rotateX(-5deg) rotateY(0);
    transform: rotateX(-5deg) rotateY(0);
    -webkit-animation: turn 20s infinite linear;
    -moz-animation: turn 20s infinite linear;
    -o-animation: turn 20s infinite linear;
    animation: turn 20s infinite linear;
}
body .container .carousel .slide {
    position: absolute;
    width: 140px;
    height: 97px;
    border-radius: 8px;
    box-shadow: 0 0 4px 1px #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body .container .carousel .slide:nth-child(1) {
    -webkit-transform: rotateY(0deg) translateZ(196px);
    -ms-transform: rotateY(0deg) translateZ(196px);
    transform: rotateY(0deg) translateZ(196px);
}
body .container .carousel .slide:nth-child(2) {
    -webkit-transform: rotateY(51.42857deg) translateZ(196px);
    -ms-transform: rotateY(51.42857deg) translateZ(196px);
    transform: rotateY(51.42857deg) translateZ(196px);
}
body .container .carousel .slide:nth-child(3) {
    -webkit-transform: rotateY(102.85714deg) translateZ(196px);
    -ms-transform: rotateY(102.85714deg) translateZ(196px);
    transform: rotateY(102.85714deg) translateZ(196px);
}
body .container .carousel .slide:nth-child(4) {
    -webkit-transform: rotateY(154.28571deg) translateZ(196px);
    -ms-transform: rotateY(154.28571deg) translateZ(196px);
    transform: rotateY(154.28571deg) translateZ(196px);
}
body .container .carousel .slide:nth-child(5) {
    -webkit-transform: rotateY(205.71429deg) translateZ(196px);
    -ms-transform: rotateY(205.71429deg) translateZ(196px);
    transform: rotateY(205.71429deg) translateZ(196px);
}
body .container .carousel .slide:nth-child(6) {
    -webkit-transform: rotateY(257.14286deg) translateZ(196px);
    -ms-transform: rotateY(257.14286deg) translateZ(196px);
    transform: rotateY(257.14286deg) translateZ(196px);
}
body .container .carousel .slide:nth-child(7) {
    -webkit-transform: rotateY(308.57143deg) translateZ(196px);
    -ms-transform: rotateY(308.57143deg) translateZ(196px);
    transform: rotateY(308.57143deg) translateZ(196px);
}

HTML

CSS 3D Carousel，原先使用jQuery费老大劲实现的3D轮播，用CSS3 transform轻松搞定。

css3, 3d, slider

编辑器支持Emmet

快捷键

CSS 3D Carousel，原先使用jQuery费老大劲实现的3D轮播，用CSS3 transform轻松搞定。

css3, 3d, slider

使用CSS3路径裁剪（clip-path）实现的图片裁剪动画

纯CSS3实现的3D地形（地图）构造器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：