用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/