該樓層疑似違規(guī)已被系統(tǒng)折疊?隱藏此樓查看此樓

*{

padding:0;

margin:0;

}

body{

width:100%;

height:100%;

background:linear-gradient(darkred 0%,black 100%);

}

#react{

width: 200px;

height:200px;

margin: 200px auto;

transform-style:preserve-3d;

animation:rotate 20s infinite;

animation-timing-function: linear;

}

#react div{

position:absolute;

transition: all .4s;

}

div .out_pic{

width:200px;

height:200px;

opacity:0.9;

}

div .in_pic{

width:100px;

height:100px;

}

#react span{

display:block;

position:absolute;

width:100px;

height:100px;

top:50px;

left:50px;

}

@keyframes rotate{

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

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

}

.out_front{

transform:translateZ(100px);

}

.out_back{

transform:translateZ(-100px);

}

.out_left{

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

}

.out_right{

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

}

.out_top{

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

}

.out_bottom{

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

}

.in_front{

transform:translateZ(50px);

}

.in_back{

transform:translateZ(-50px);

}

.in_left{

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

}

.in_right{

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

}

.in_top{

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

}

.in_bottom{

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

}

/*外面的圖片散開*/

#react:hover .out_front{

transform:translateZ(200px);

}

#react:hover .out_back{

transform:translateZ(-200px);

}

#react:hover .out_left{

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

}

#react:hover .out_right{

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

}

#react:hover .out_top{

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

}

#react:hover .out_bottom{

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

}

/*里面的圖片散開*/

#react:hover .in_front{

transform:translateZ(100px);

}

#react:hover .in_back{

transform:translateZ(-100px);

}

#react:hover .in_left{

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

}

#react:hover .in_right{

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

}

#react:hover .in_top{

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

}

#react:hover .in_bottom{

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

}

@charset "utf-8";

/* CSS Document */

總結(jié)

以上是生活随笔為你收集整理的手机html立体相册,照片还放手机相册里就out了，试着自己编辑一个立体相册的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。