3d kub med knappar .. mindre störande för besökare antar jag.
Finns en exludering i denna kod som du kan ta bort spärrarna på "/*", för att få en konstant roterande kub där du anger tiden för ett varv.. allt står i koden, och ändrar du ingenting så hamnar kuben på samma ställe och fungerar som den du ser till höger just nu.
Om du inte redan hajjat syftet med denna kub så ... det är bara sex bilder på ytan av en, där användaren väljer om den vill se flera eller så påtvingar du det genom en konstant rotation. Själv tycker jag det är stilrent när man får valet själv.
Den här koden ska funka till opera, mozilla, chrome och några fler förmodligen..
Alla bilder du ser till höger när du roterar kuben följer med koden, du borde enkelt se var du byter ut denna adress till dina egna bilder "background-image: url (där) .... lycka till :)

Just före /body i startsida
<input type="radio" id="radio-front" name="select-face"/> <input type="radio" id="radio-back" name="select-face"/> <input type="radio" id="radio-left" name="select-face"/> <input type="radio" id="radio-top" name="select-face"/> <input type="radio" id="radio-right" name="select-face"/> <input type="radio" id="radio-bottom" name="select-face"/> <div class="spacing"></div> /*för mellanrummets skull..*/ <div id="container"> <div id="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>

Någonstans i stilmall
.spacing {width: 99.9%; margin: 0px 0px 10px 0px;} #container { position: absolute; right: 10px; top: 377px;/*här anger du position*/ -webkit-perspective : 10000px;/*prova lägre och se vad som händer*/ -moz-perspective : 10000px; -o-perspective : 10000px; -ms-perspective : 10000px; perspective : 10000px; -webkit-perspective-origin : 50% 50%; -moz-perspective-origin : 50% 50%; -moz-transform-origin : 50% 50%; -o-perspective-origin : 50% 50%; -ms-perspective-origin : 50% 50%; perspective-origin : 50% 50%; -webkit-font-smoothing: antialiased;} #cube { position: relative; margin: auto; height: 240px; width: 240px; /*tiden det ska ta att flippa kuben*/ -webkit-transition : -webkit-transform 1.5s linear; -moz-transition : -moz-transform 1.5s linear; -o-transition : -o-transform 1.5s linear; -ms-transition : -ms-transform 1.5s linear; transition : transform 1.5s linear; -webkit-transform-style : preserve-3d; -webkit-font-smoothing: antialiased; -moz-transform-style : preserve-3d; -o-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d;} #cube>div { position: absolute; border: 1px solid #fff;/*ramen runt bilderna/kanten på kuben*/ /*dessa ska stämma med måtten ovanför*/ border-radius: 2px; height: 240px; width: 240px; padding: 0px; opacity: 0.9;/*genomskinligheten av hela kuben*/ background-position:center center; -webkit-font-smoothing: antialiased;} /*1/2 av värdena (px) ovan på alla dessa childs nedan..*/ #cube div:nth-child(1) { -webkit-transform : translateZ(120px); -moz-transform : translateZ(120px); -o-transform : translateZ(120px); -ms-transform : translateZ(120px); transform : translateZ(120px); /*länka in fyrkantiga bilder, annars försvinner sidorna eller tvärtom*/ background-image: url(http://i.imgur.com/23XvP6h.jpg); background-size: auto 100%;} #cube div:nth-child(2) { -webkit-transform : rotateY(90deg) translateZ(120px); -moz-transform : rotateY(90deg) translateZ(120px); -o-transform : rotateY(90deg) translateZ(120px); -ms-transform : rotateY(90deg) translateZ(120px); transform : rotateY(90deg) translateZ(120px); background-image: url(http://i.imgur.com/15g1vr3.jpg); background-size: auto 100%;} #cube div:nth-child(3) { -webkit-transform : rotateY(180deg) translateZ(120px); -moz-transform : rotateY(180deg) translateZ(120px); -o-transform : rotateY(180deg) translateZ(120px); -ms-transform : rotateY(180deg) translateZ(120px); transform : rotateY(180deg) translateZ(120px); background-image: url(http://i.imgur.com/vM4ZfIe.jpg); background-size: auto 100%;} #cube div:nth-child(4) { -webkit-transform : rotateY(-90deg) translateZ(120px); -moz-transform : rotateY(-90deg) translateZ(120px); -o-transform : rotateY(-90deg) translateZ(120px); -ms-transform : rotateY(-90deg) translateZ(120px); transform : rotateY(-90deg) translateZ(120px); background-image : url(http://i.imgur.com/arnUiBv.jpg); background-size: auto 100%;} #cube div:nth-child(5) { -webkit-transform : rotateX(-90deg) translateZ(120px) rotate(180deg); -moz-transform : rotateX(-90deg) translateZ(120px) rotate(180deg); -o-transform : rotateX(-90deg) translateZ(120px) rotate(180deg); -ms-transform : rotateX(-90deg) translateZ(120px) rotate(180deg); transform : rotateX(-90deg) translateZ(120px) rotate(180deg); background-image : url(http://i.imgur.com/rdfCh70.jpg?1); background-size: auto 100%;} #cube div:nth-child(6) { -webkit-transform : rotateX(90deg) translateZ(120px); -moz-transform : rotateX(90deg) translateZ(120px); -o-transform : rotateX(90deg) translateZ(120px); -ms-transform : rotateX(90deg) translateZ(120px); transform : rotateX(90deg) translateZ(120px); background-image: url(http://i.imgur.com/IK3mpEq.jpg?1); background-size: auto 100%;} // controls #radio-front:checked ~ #container #cube { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg);} #radio-back:checked ~ #container #cube { -webkit-transform: rotateY(180deg)rotateX(360deg); -moz-transform: rotateY(180deg)rotateX(360deg);} #radio-left:checked ~ #container #cube { -webkit-transform: rotateY(90deg)rotateX(720deg); -moz-transform: rotateY(90deg)rotateX(720deg);} #radio-top:checked ~ #container #cube { -webkit-transform: rotateX(-90deg)translateZ(10px); -moz-transform: rotateX(-90deg)translateZ(10px);} #radio-right:checked ~ #container #cube { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg);} #radio-bottom:checked ~ #container #cube { -webkit-transform: rotateX(90deg)rotateY(180deg); -moz-transform: rotateX(90deg)rotateY(180deg);} input {float: right; margin-right: 1.65%;}/*vilken sida knapparna ska vara på och mellanrummet..*/ /* radera slashtecknena och stjärnorna på det nedan om du vill ha en konstant roterande kub. du ser var du ändrar tiden, det är hastigheten på rotationen */ /*.animate { -webkit-animation : spinningH 10s infinite linear; -moz-animation : spinningH 10s infinite linear; -o-animation : spinningH 10s infinite linear; -ms-animation : spinningH 10s infinite linear; animation : spinningH 10s infinite linear;} .animate:hover {-webkit-animation-play-state: paused;} @-moz-keyframes spinningH {from {-moz-transform: rotateX(0deg) rotateY (0deg);} to{-moz-transform: rotateX(360deg) rotateY(180deg);}} @-webkit-keyframes spinningH { from {-webkit-transform: rotateX(0deg) rotateY (0deg);} to{-webkit-transform: rotateX(360deg) rotateY(360deg);}} @-o-keyframes spinningH { from { -o-transform: rotateX(0deg) rotateY(0deg); } to{ -o-transform: rotateX(360deg) rotateY(360deg);}} @-ms-keyframes spinningH {from {-ms-transform: rotateX(0deg) rotateY(0deg); } to{ -ms-transform: rotateX(360deg) rotateY(360deg);} } @keyframes spinningH { from { transform: rotateX(0deg) rotateY(0deg);} to{ transform: rotateX(360deg) rotateY(360deg);} }*/