html5制作3D袜子飘动动画

html5制作3D袜子飘动动画

Css部分：

#container{

-webkit-perspective: 1400px;

-webkit-transform-style: preserve-3d;

}

#floor{

position: absolute;

width:1296px;

height:864px;

background: url('http://f.cl.ly/items/2K1J3K2F3P2G2v0P261j/allegiance.jpg') no-repeat;

background-size: 100% 100%;

top:00px;

}

.modal{

position: absolute;

}

#modal1{

width:676px; height:278px; /* retina */

left: 285px;

top:70px;

background-image: url("http://f.cl.ly/items/0l1c460S1S2m3G2P3a2K/sock-mid.png");

background-size: cover;

overflow: visible;

}

#modal1dark{

width:676px; height:278px; /* retina */

left: 50%;

margin-left: -318px;

top:160px;

background-image: url("http://f.cl.ly/items/212H0t2O171y1G3j2E0J/sock-low.png");

background-size: cover;

overflow: visible;

opacity:0;

}

#modal1light{

width:676px; height:278px; /* retina */

left: 50%;

margin-left: -318px;

top:160px;

background-image: url("http://f.cl.ly/items/421Y0q1g391O2n2X2k0p/sock-high.png");

background-size: cover;

overflow: visible;

}

.modalSlice{

z-index: -2;

content:"";

overflow: visible;

position: absolute;

}

.darkSlice{

z-index: -1;

content:"";

overflow: visible;

position: absolute;

opacity:0;

}

.modalMom{

position: absolute;

top:0px;

z-index: 100;

height:300px;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

}

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！