3D scrolling effects implemented by HTML5 and CSS3

Today brings you a 3D scrolling effect that HTML5 and CSS3 realize. As follows:

Online preview Source Download

The implemented code.

HTML code:

 <Divclass= "Container">        <Divclass= "Cube">            <Divclass= "Side Side1">            </Div>            <Divclass= "Side Side2">            </Div>            <Divclass= "Side Side3">            </Div>            <Divclass= "Side Side4">            </Div>            <Divclass= "Side Side5">            </Div>            <Divclass= "Side Side6">            </Div>        </Div>    </Div>    <Divclass= "Container Container2">        <Divclass= "Cube">            <Divclass= "Side Side1">            </Div>            <Divclass= "Side Side2">            </Div>            <Divclass= "Side Side3">            </Div>            <Divclass= "Side Side4">            </Div>            <Divclass= "Side Side5">            </Div>            <Divclass= "Side Side6">            </Div>        </Div>    </Div>

CSS3 Code:

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:rotate 4s infinite ease-in-out;Animation:rotate 4s infinite ease-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-keyframes Rotate{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); }} @keyframes Rotate{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%;}

via:http://www.w2bc.com/article/12759

3D scrolling effects implemented by HTML5 and CSS3