python3d相册源代码_js和CSS3炫酷3D相册展示

js和CSS3炫酷3D相册展示

*{margin:0;padding:0;}

body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;};

h1{width:277;height:76px;margin:30px auto 0;}

.xc-3D{width:100%;height:300px;background:#fff;margin-top:100px;position:relative;transform-style:preserve-3D;/*转变3D*/perspective:800px;//景深}

.xc-3D img{position:absolute;-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(0,0,0,0.1),rgba(0,0,0,0.5));transition:1s;}

.xc-3D img .forn{transform:rotateY(45deg);transfromZ(-100px);}

.xc-3D img .now{transform:rotateY(0deg);transfromZ(100px);}

.xc-3D img .last{transform:rotateY(-45deg);transfromZ(-100px);}

//h1装logo