抖音3d相册html代码,抖音3D立体相册表白代码.doc

抖音3D立体相册表白浪漫代码

首先先建立html文件

css-3d旋转

之后再新建一个CSS的文件夹

并在css文件夹中建立txt文件，并且把代码复制进去，修改后缀名为.css

html{

background: #000;

height: 100%;

}

/*最外层容器样式*/

.wrap{

position: relative;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 200px;

height: 200px;

margin: auto;

/*改变左右上下,图片方块移动*/

}

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

.cube{

width: 200px;

height: 200px;

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: 200px;

height: 200px;