html正方形相册,3D正方体旋转相册.html

自己随便改名都可以，会显示在标题

body{

background:rgba(0, 0, 0, 1.0);

/*更改背景颜色*/

}

* {

margin:0;

padding:0;

}

video{

opacity: 0.1;

width: 50%;

height: 20px;

transition: 0.5s;

left: 25%;

bottom: 20px;

z-index: 100;

position: fixed;

}

/*最外层容器样式*/

.wrap {

width: 300px;

height: 300px;

margin: 175px auto;

position: relative;

border-radius:50%;

}

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

.cube {

width: 300px;

height: 300px;

margin: 0 auto;

transform-style: preserve-3d;

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

animation: rotate linear 20s infinite;

}

@-webkit-keyframes rotate {

from {

transform: rotateX(0deg) rotateY(0deg);

}

to {

transform: rotateX(720deg) 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: block;

width: 150px;

height: 150px;

position: absolute;

top: 75px;

left: 75px;

}

.cube .in_pic {

width: 150px;

height: 150px;

}

.cube .in_front {

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

}

.cube .in_back {

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

}

.cube .in_left {

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

}

.cube .in_right {

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

}

.cube .in_top {

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

}

.cube .in_bottom {

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

}

/*鼠标移入后样式*/

.cube:hover .out_front {

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

}

.cube:hover .out_back {

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

}

.cube:hover .out_left {

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

}

.cube:hover .out_right {

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

}

.cube:hover .out_top {

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

}

.cube:hover .out_bottom {

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

}

/*鼠标移入完全显示播放器*/

video:hover{

opacity: 1;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史