怎么把照片做成立方体在html播放,立方体照片.html

立方体照片

*{

margin: 0;padding: 0;

}

body{background:#ccc;}

.box{

margin: 200px auto;

/*perspective规定3D元素的透视效果*/

perspective: 1000px;

-webkit-perspective: 1000px;

-moz-perspective: 1000px;

-ms-perspective: 1000px;

}

.x{

transform-style: preserve-3d; /*子元素保留3D效果*/

transform: rotateX(-30deg);

}

.y{

transform-style: preserve-3d;

transform: rotateY(10deg);

}

.y div{

position: absolute;

width: 235px;

height: 235px;

left: 300px;

opacity: 0.75;

border-radius: 15px;

transition:all .3s linear;

}

.y div#i1 {

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

}

.y div#i2 {

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

}

.y div#i3 {

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

}

.y div#i4 {

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

}

.y div#i5 {

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

}

.y div#i6 {

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

}

.y div img {

height:235px;

width:235px;

border-radius: 15px;

transition:all .3s linear;

}

.y div:hover {

opacity: 1;

}

.y div:hover img{

height:340px;

width:340px;

margin-left:-50px;

margin-top:-50px;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史