用CSS3的2D,3D和动画效果来做一个立方照片墙
3D转换:
平移
translateX() 沿X轴平移
translateY() 沿Y轴平移
translateZ() 沿Z轴平移
旋转
rotateX() 绕X轴旋转
rotateY() 绕Y轴旋转
rotateZ() 绕Z轴旋转
动画:
.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演示地址: