html5css怎么做点击滚动图片,一款利用html5和css3实现的3D滚动特效的教程

body{

height:100vh;

}

.container{

position:absolute;

height:100px;

width:100px;

left:33%;

top:50%;

-webkit-transform:translateX(-50%)translateY(-50%);

transform:translateX(-50%)translateY(-50%);

-webkit-perspective:400px;

perspective:400px;

}

.cube{

height:100px;

widht:100px;

-webkit-transform-origin:50%50%;

transform-origin:50%50%;

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

transform-style:preserve-3d;

-webkit-animation:rotate4sinfiniteease-in-out;

animation:rotate4sinfiniteease-in-out;

}

.side{

position:absolute;

display:block;

height:100px;

width:100px;

}

.side1{

background:#41C3AC;

-webkit-transform:translateZ(100px);

transform:translateZ(100px);

}

.side2{

background:#FF884D;

-webkit-transform:rotateY(90deg)translateZ(100px);

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

}

.side3{

background:#32526E;

-webkit-transform:rotateY(180deg)translateZ(100px);

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

}

.side4{

background:#65A2C5;

-webkit-transform:rotateY(-90deg)translateZ(100px);

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

}

.side5{

background:#FFCC5C;

-webkit-transform:rotateX(90deg)translateZ(100px);

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

}

.side6{

background:#FF6B57;

-webkit-transform:rotateX(-90deg)translateZ(100px);

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

}

@-webkit-keyframesrotate{

0%{

-webkit-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg);

}

33.33%{

-webkit-transform:rotateX(360deg)rotateY(0deg)rotateZ(0deg);

}

66.66%{

-webkit-transform:rotateX(360deg)rotateY(360deg)rotateZ(0deg);

}

100%{

-webkit-transform:rotateX(360deg)rotateY(360deg)rotateZ(360deg);

}

}

@keyframesrotate{

0%{

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

}

50%{

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

}

100%{

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

}

}

a{

font-family:helvetica;

color:#428bca;

text-align:center;

display:block;

}

.container2{

left:66%;

}

.container2.side{

border-radius:50%;

}