用CSS3做一個立方照片牆

用CSS3的2D，3D和動畫效果來做一個立方照片牆

3D轉換：

    平移

    translateX()        沿X軸平移

    translateY()        沿Y軸平移

    translateZ()        沿Z軸平移

    旋轉

    rotateX()        繞X軸旋轉

    rotateY()        繞Y軸旋轉

    rotateZ()        繞Z軸旋轉

動畫：

1.animation對動畫做一些規定

.box

{

animation-name: move; //動畫名字

animation-duration: 5s; //規定動畫一個週期的時長爲5s

animation-timing-function: linear; //規定動畫的速度曲線，linear就是勻速，ease就是慢-快-慢，ease-in就是低速開始，ease-out就是低速結束，ease-in-out就是開頭和結尾慢

animation-delay: 2s; //延遲2後纔開始播放動畫

animation-iteration-count: infinite; //規定動畫的播放次數，infinite爲無限播放

animation-direction: alternate; //alternate爲動畫在下一週期中反向播放

animation-fill-mode: forwards; //動畫運行完保持在最後一幀的狀態，如果爲backwards則回到第一幀的狀態

animation-play-state: running; //如果值爲paused則可以暫停動畫

animation:move 5s linear 2s infinite alternate forwards running; //所有動畫屬性的簡寫

｝

2.@keyframes 設置動畫的具體內容

①@keyframes move

{

from {background: red;}

to {background: yellow;}

}

②@keyframes move

{

0% {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

注：如果要實現逐幀動畫，即每個狀態之間沒有過渡的就用：animation-timing-function:steps(1);

Code：

index.html

<div id="container">
        <div id="box">
            <div class="front"><img src="imgs/1.jpg"/></div>        <!--圖片地址改爲對應的本地地址-->
            <div class="back"><img src="imgs/2.jpg"/></div>
            <div class="left"><img src="imgs/3.jpg"/></div>
            <div class="right"><img src="imgs/4.jpg"/></div>
            <div class="top"><img src="imgs/5.jpg"/></div>
            <div class="bottom"><img src="imgs/6.png"/></div>
        </div>
</div>

main.css

* {
    padding: 0;
    margin: 0;
}
#container{
    width: 100%;
    height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 500px;
}
#box{
    width: 200px;
    height:200px;
    transform-style:preserve-3d ;
    transform: translateZ(-100px);
    transition: transform 1s;
    animation: spin 13s linear infinite;
}
#box div{
    width: 200px;
    height:200px;
    position: absolute;
}
img{
    width: 200px;
    height: 200px;
    opacity: 0.9;
}
/*立方體的六個面*/
.front{
    background-color: rgba(0,255,255,0.2);
    transform: translateZ(100px);           /*往外移動100像素*/
}
.back{
    background-color: rgba(0,255,0,0.3);
    transform: translateZ(-100px) rotateY(180deg);           /*往裏移動100像素，繞Y軸旋轉180度*/
}
.left{
    background-color: rgba(0,0,255,0.3);
    transform: translateX(-100px) rotateY(-90deg);      /*往左移動100像素，繞Y軸旋轉90度*/
}
.right{
    background-color: rgba(255,255,0,.3);
    transform: translateX(100px) rotateY(90deg);      /*往右移動100像素，繞Y軸旋轉90度*/
}
.top{
    background-color: rgba(255,0,255,.3);
    transform: translateY(-100px) rotateX(90deg);      /*向上移動100像素，繞X軸旋轉90度*/
}
.bottom{
    background-color: rgba(255,0,0,0.3);
    transform: translateY(100px) rotateX(-90deg);        /*向下移動100像素，繞X軸旋轉90度*/
}
/*動畫*/
@keyframes spin
{
    0% {
        transform: rotateX(0deg);
    }
    20%{
        transform: translateZ(-100px) rotateX(-90deg) rotateY(-90deg);
    }
    40% {
        transform: rotateX(180deg);
    }
    60% {
        transform: rotateX(360deg) rotateY(0deg);
    }
    80% {
        transform: rotateX(360deg) rotateY(180deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

效果圖：

demo演示地址：

http://kysonlai.gitee.io/css3_cubic_wall/