CSS特效——旋转相册

最新推荐文章于 2025-06-01 16:06:59 发布

原创

最新推荐文章于 2025-06-01 16:06:59 发布 · 886 阅读

3 ·

CC 4.0 BY-SA版权

CSS特效——旋转相册

一、制作思路

想通过定位的方式将所有的相片叠加到一起，再通过3D旋转将所有的相册拼成一个正方体，最后使用动画是其动起来。附加特效：：：可以鼠标经过是，相片的映像层有小变大，由虚变实。

二、步骤详解

1、初始化和基础框架

 <div class="outer">
        <div class="min">
            <img src="image/1.jpeg" alt="javascript:;" class="imgs">
            <img src="image/2.jpeg" alt="javascript:;" class="imgs">
            <img src="image/3.jpeg" alt="javascript:;" class="imgs">
            <img src="image/4.jpeg" alt="javascript:;" class="imgs">
            <img src="image/5.jpeg" alt="javascript:;" class="imgs">
            <img src="image/6.jpeg" alt="javascript:;" class="imgs">
        </div>
        <div class="max">
            <img src="image/1.jpeg" alt="javascript:;" class="img">
            <img src="image/2.jpeg" alt="javascript:;" class="img">
            <img src="image/3.jpeg" alt="javascript:;" class="img">
            <img src="image/4.jpeg" alt="javascript:;" class="img">
            <img src="image/5.jpeg" alt="javascript:;" class="img">
            <img src="image/6.jpeg" alt="javascript:;" class="img">
        </div>
    </div>

*{
   
   
    margin: 0;
    padding: 0;
    box-sizing:border-box ;
}
body{
   
   
    height: 100vh;
    width: 100%;
    background-color: rgb(233, 195, 151);
}
.outer{
   
   
    position: relative;
    margin: 200px auto ;
    transform-style: preserve-3d;
    perspective: 4000px;
    height: 300px;
    width: 300px;
    animation: rotateY 4s linear infinite ;
}

2、设置相册拼成正方体

.min .imgs{
   
   
    position: absolute;
    left: 50px;
    top: 50px;
    height: 150px;
    width: 150px;
    
}
.min .imgs:nth-child(1){
   
   
    transform: translateZ(80px);
}
.min .imgs:nth-child(2){
   
   
    transform: translateZ(-80px);
}
.min .imgs:nth-child(3){
   
   
    transform: translateY(80px) rotateX(90deg);
}
.min .imgs:nth-child(4){
   
   
    transform: translateY(-80px) rotateX(-90deg);
}
.min .imgs:nth-child(5){
   
   
    transform: translateX(80px) rotateY(90deg);
}
.min .imgs:nth-child(6){
   
   
    transform: translateX(-80px) rotateY(-90deg);
}

.max .img{
   
   
    position: absolute;
    left: 25px;
    top: 25px;
    height: 200px;
    width: 200px;
    opacity: .2;
    
}
.max .img:nth-child(1){
   
   
    transform: translateZ(115px) rotateX(10deg);
}
.max .img:nth-child(2){
   
   
    transform: translateZ(-115px) rotateX(-10deg);
}
.max .img:nth-child(3){
   
   
    transform: translateY(105px) rotateX(85deg);
}
.max .img:nth-child(4){
   
   
    transform: translateY(-115px) rotateX(-95deg);
}
.max .img:nth-child(5){
   
   
    transform: translateX(115px) rotateY(90deg) rotateY(10deg);
}
.max .img:nth-child(6){
   
   
    transform: translateX(-115px) rotateY(-90deg) rotateY(-10deg);
}

3、使其旋转起来

@keyframes rotateY {
   
   
    0%{
   
   
        transform: rotateY(0deg);
        
    }
    100%{
   
   
        
        transform: rotateY(360deg);
    }
    
}

4、附加特效

.outer:hover .max .img:nth-child(1){
   
   
    animation: rotate1 1s linear forwards;
}
.outer:hover .max .img:nth-child(2){
   
   
    animation: rotate2 1s linear forwards;
}
.outer:hover .max .img:nth-child(3){
   
   
    animation: rotate3 1s linear forwards;
}
.outer:hover .max .img:nth-child(4){
   
   
    animation: rotate4 1s linear forwards;
}
.outer:hover .max .img:nth-child(5){