用CSS+HTML代码制作的3D动态旋转相册

灯下晚归人cc

已于 2022-01-29 10:12:24 修改

阅读量1.8k

点赞数 3

CC 4.0 BY-SA版权

文章标签： css html 3d

于 2022-01-27 09:39:48 首次发布

本文链接：https://blog.youkuaiyun.com/qq_58003121/article/details/122700142

CSS代码

html{
    background:black;
    height: 100%;
}

.wrap{
    position: relative;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 200px;
    margin: auto;
}
.cube{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform:rotateX(-30deg)rotateY(-80deg) ;
    -webkit-animation:rotate 20s infinite;
    animation-timing-function:linear ;    
}
@-webkit-keyframes rotate{
        from{transform: rotateX(0deg)rotateY(0deg);}
        to{transform: rotateX(360deg)rotateY(360deg);}
    }
.cube div{
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition: all.4s;
}
.pic{
    width: 200px;
    height: 200px;
}
.cube.out_front{
    transform: rotateY(0deg) translateZ(100px);
}
.cube.out_back{
    transform: translateZ(-100px) rotateY(180deg);
}
.cube.out_left{
    transform: rotateY(90deg)translateZ(100px);
}
.cube.out_right{
    transform: rotateY(-90deg)translateZ(100px);
}
.cube.out_top{
    transform: rotateX(90deg)translateZ(100px);
}
.cube.out_bottom{
    transform: rotateX(-90deg)translateZ(100px);
}
.cube span{
    display: bloack;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}    
.cube.in_pic{
    width: 100px;
    height: 100px;
}
.cube.in_front{
    transform: rotateY(0deg) translateZ(50px);
}
.cube.in_back{
    transform:translateZ(-50px)  rotateY(180deg);
}
.cube.in_left{
    transform:rotateY(90deg) translateZ(50px);
}
.cube.in_right{
    transform:rotateY(-90deg) translateZ(50px);
}    
.cube.in_top{
    transform:rotateY(90deg) translateZ(50px);
}    
.cube.in_bottom{
    transform:rotateY(-90deg) translateZ(50px);
}    
.cube:hover .out_front{
    transform:rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
    transform: translateZ(-200px)rotateY(180deg);
}
.cube:hover .out_left{
    transform:rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
    transform:rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
    transform:rotateX(90deg) translateZ(200px);
}    
.cube:hover .out_bottom{
    transform:rotateX(-90deg) translateZ(200px);
}

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>我爱她</title>
        <style type="text/css">
            html{
                background:black;
            &nbs