CSS3 立体轮播

2020-01-16
CSS
Word count: 970 | Reading time≈ 5 min
CSS3 立体轮播

最近比较迷css，可能是JavaScript看的头疼
可以用作图片轮播，换成小的立方体还可以当做是缓冲动画
效果很好看就是每次弄旋转角度、移动位置的时候头疼
~~没有找到方法~~ 就是我空间感不行
<style>
    .cubeCover{
        width: 100px;
        height: 300px;
        margin-top: 150px;
        margin-left: 200px;
    }
    .cubeCover .cube{
        transform-style: preserve-3d;
        width: 100%;
        height: 100%;
        position: relative;
        transform: rotateY(20deg) rotateX(-20deg) ;
        animation: move1 6s linear infinite .75s;
    }
    .cubeCover .cube div{
        border: 1px solid #ccc;
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .cubeCover .cube div:nth-child(1){
        transform:translateZ(-150px);
        background: url('/images/bottom.jpg');
        background-position: 0 0;
    }
    .cubeCover .cube div:nth-child(2){
        transform: rotateX(90deg) translateZ(150px);
        background: url('/images/side.jpg');
        background-position: 0 0;
    }
    .cubeCover .cube div:nth-child(3){
        transform:rotateX(90deg) translateZ(-150px)  ;
        background: url('/images/top.jpg');
    }
    .cubeCover .cube div:nth-child(4){
        width: 300px;
        transform: rotateY(90deg) translateZ(-150px);
        background: lightblue;
    }
    .cubeCover .cube div:nth-child(5){
        width: 300px;
        transform: rotateY(90deg) translateZ(-50px);
        background: lightblue;
    }
    .cubeCover .cube div:nth-child(6){
        transform: translateZ(150px);
        background: url('/images/avatar.jpg');
        background-position: 0 0;
    }
    .cubeCover .cube2{
        margin-top: -300px;
        margin-left: 90px;
        z-index: -1;
        animation: move1 6s linear infinite .5s;
    }
    .cubeCover .cube2 div:nth-child(1),.cubeCover .cube2 div:nth-child(2),.cubeCover .cube2 div:nth-child(3),.cubeCover .cube2 div:nth-child(6){
        background-position: -100px 0;
    }
    .cubeCover .cube3{
        margin-top: -300px;
        margin-left: 180px;
        z-index: -2;
        animation: move1 6s linear infinite .25s;
    }
    .cubeCover .cube3 div:nth-child(1),.cubeCover .cube3 div:nth-child(2),.cubeCover .cube3 div:nth-child(3),.cubeCover .cube3 div:nth-child(6){
        background-position: -200px 0;
    }
    .cubeCover .cube4{
        margin-top: -300px;
        margin-left: 270px;
        z-index: -3;
        animation: move1 6s linear infinite ;
    }
    .cubeCover .cube4 div:nth-child(1),.cubeCover .cube4 div:nth-child(2),.cubeCover .cube4 div:nth-child(3),.cubeCover .cube4 div:nth-child(6){
        background-position: -300px 0;
    }
    @keyframes move1 {
        12.5%,25%{
            transform:rotateY(20deg) rotateX(70deg);
        }
        42.5%,55%{
            transform:rotateY(20deg) rotateX(160deg);
        }
        62.5%,75%{
            transform:rotateY(20deg) rotateX(250deg);
        }
        92.5%,100%{
            transform:rotateY(20deg) rotateX(340deg);
        }
    }
</style>
<body>
    <div class="cubeCover">
        <div class="cube">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="cube cube2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="cube cube3">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="cube cube4">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>