html网页特效代码大全上任女,快手抖音超火程序员表白女朋友3D立体相册特效html网页代码...

}

/*包裹所有容器样式*/

.cube{

width:600px;

height:400px;

margin: 0 auto;

transform-style: preserve-3d;

transform: rotateX(-30deg) rotateY(-80deg);

-webkit-animation: rotate 20s infinite;

/*匀速*/

animation-timing-function: linear;

}

@-webkit-keyframes rotate{

from{transform: rotateX(0deg) rotateY(0deg);}

to{transform: rotateX(360deg) rotateY(360deg);}

}

.cube div{

position: absolute;

width: 300px;

height: 300px;

opacity: 0.8;

transition: all .4s;

}

/*定义所有图片样式*/

.pic{

width: 300px;

height: 300px;

}

.cube .out_front{

transform: rotateY(0deg) translateZ(150px);

}

.cube .out_back{

transform: translateZ(-150px) rotateY(180deg);

}

.cube .out_left{

transform: rotateY(90deg) translateZ(150px);

}

.cube .out_right{

transform: rotateY(-90deg) translateZ(150px);

}

.cube .out_top{

transform: rotateX(90deg) translateZ(150px);

}

.cube .out_bottom{

transform: rotateX(-90deg) translateZ(150px);

}

/*定义小正方体样式*/

.cube span{

display: bloack;

width: 200px;

height: 200px;

position: absolute;

top: 50px;

left: 50px;

}

.cube .in_pic{

width: 200px;

height: 200px;

}

.cube .in_front{

transform: rotateY(0deg) translateZ(100px);

}

.cube .in_back{

transform: translateZ(-100px) rotateY(180deg);

}

.cube .in_left{

transform: rotateY(90deg) translateZ(100px);

}

.cube .in_right{

transform: rotateY(-90deg) translateZ(100px);

}

.cube .in_top{

transform: rotateX(90deg) translateZ(100px);

}

.cube .in_bottom{

transform: rotateX(-90deg) translateZ(100px);

}

/*鼠标移入后样式*/

.cube:hover .out_front{

transform: rotateY(0deg) translateZ(400px);

}

.cube:hover .out_back{

transform: translateZ(-400px) rotateY(180deg);

}

.cube:hover .out_left{

transform: rotateY(90deg) translateZ(400px);

}

.cube:hover .out_right{

transform: rotateY(-90deg) translateZ(400px);

}

.cube:hover .out_top{

transform: rotateX(90deg) translateZ(400px);

}

.cube:hover .out_bottom{

transform: rotateX(-90deg) translateZ(400px);

}