We Keep Coding

Make a Webpage out of a 3D Cube ?

I´m trying to make a webpage out of a 3D cube with 6 surfaces/pages.
This is the Code of my 3D Cube:
$(document).ready(function(){
$('button').click(function(){
$('button').removeClass('active');
$(this).addClass('active');
});
$('.ft').click(function(){
$('#shape').removeClass().addClass('show-ft');
});
$('.rt').click(function(){
$('#shape').removeClass().addClass('show-rt');
});
$('.lt').click(function(){
$('#shape').removeClass().addClass('show-lt');
});
$('.bk').click(function(){
$('#shape').removeClass().addClass('show-bk');
});
$('.tp').click(function(){
$('#shape').removeClass().addClass('show-tp');
});
$('.bm').click(function(){
$('#shape').removeClass().addClass('show-bm');
});
$('.spinstart').click(function(){
$('#shape').addClass('spin');
});
$('.spinstop').click(function(){
$('#shape').removeClass('spin');
});
});
#main {
margin:0;
padding:0;
border:1px solid #ddd;
background-color:white;
width:800px;
height:500px;
margin:10px auto;
}
.btn-group-wraper {
position:absolute;
top:30px;
left:65px;
}
.shadow {
position:absolute;
width:100px;
height:100px;
box-shadow:0 0 15px white;
box-shadow:inset 0 0 155px white;
background-color:#000 !important;
opacity:.15 !important; -webkit-transform:
rotateX(90deg) translateZ(-100px);
-moz-transform: rotateX(90deg) translateZ(-100px);
}
#container {
width:100%; -webkit-perspective:800px; -moz-
perspective:800px;
perspective:800px; position:relative;
}
#shape {
position:relative; margin:0 auto; top:170px;
width:125px; height:125px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-5deg) rotateY(-30deg);
-moz-transform: rotateX(-5deg) rotateY(-30deg);
transform: rotateX(-5deg) rotateY(-30deg);
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
transition: transform 2s;
}
#-webkit-keyframes spin {
to { -webkit-transform: rotateX(360deg)
rotateY(360deg);
}
}
#-moz-keyframes spin {
to {
-moz-transform: rotateX(360deg) rotateY(360deg);
}
}
#keyframes spin {
to { transform: rotateX(360deg) rotateY(360deg); }
}
#shape > div {
position:absolute;
width:125px;
height:125px;
border:1px solid white;
background-color:#999;
}
#shape .ft {
-webkit-transform: translateZ(63px);
-moz-transform: translateZ(63px);
transform: translateZ(63px);
}
#shape .rt {
-webkit-transform: rotateY(90deg) translateZ(63px);
-moz-transform: rotateY(90deg) translateZ(63px);
transform: rotateY(90deg) translateZ(63px);
}
#shape .bk { -webkit-transform: rotateY(180deg)
translateZ(63px);
-moz-transform: rotateY(180deg) translateZ(63px);
transform: rotateY(180deg) translateZ(63px);
}
#shape .lt {
-webkit-transform: rotateY(270deg) translateZ(63px);
-moz-transform: rotateY(270deg) translateZ(63px);
transform: rotateY(270deg) translateZ(63px);
}
#shape .tp {
-webkit-transform: rotateX(90deg) translateZ(63px);
-moz-transform: rotateX(90deg) translateZ(63px);
transform: rotateX(90deg) translateZ(63px);
}
#shape .bm {
-webkit-transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
-moz-transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
}
#shape.show-ft {
-webkit-transform: translateZ(63px);
-moz-transform: translateZ(63px);
transform: translateZ(63px);
}
#shape.show-rt {
-webkit-transform: rotateX(360deg) rotateY(-90deg);
-moz-transform: rotateX(360deg) rotateY(-90deg);
transform: rotateX(360deg) rotateY(-90deg);
}
#shape.show-bk {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#shape.show-lt {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
transform: rotateY(90deg);
}
#shape.show-tp {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: rotateX(-90deg) rotateY(-360deg);
-moz-transform: rotateX(-90deg) rotateY(-360deg);
transform: rotateX(-90deg) rotateY(-360deg);
}
#shape.show-bm {
-webkit-transform: rotateX(90deg) rotateY(360deg);
-moz-transform: rotateX(90deg) rotateY(360deg);
transform: rotateX(90deg) rotateY(360deg);
}
#shape.spin {
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
}
#shape {
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: scale(1);
-webkit-transform: rotateX(-5deg) rotateY(-30deg);
-moz-transform: scale(1);
-moz-transform: rotateX(-5deg) rotateY(-30deg);
transform: scale(1);
transform: rotateX(-5deg) rotateY(-30deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main">
<div id="container">
<div class="btn-group-wraper">
<div>
<button class="ft">1</button>
<button class="rt">2</button>
<button class="bk">3</button>
<button class="lt">4</button>
<button class="tp">5</button>
<button class="bm">6</button>
</div>
<div>
<button class="spinstart">spin start</button>
<button class="spinstop">spin stop</button>
</div>
</div>
<div id="shape">
<div class="ft" id="#ftid">1</div>
<div class="rt" id="#rtid">2</div>
<div class="bk" id="#bkid">3</div>
<div class="lt" id="#ltid">4</div>
<div class="tp" id="#tpid">5</div>
<div class="bm" id="#ftid">6</div>
</div>
</div>
</div>
To the Fiddle.js:
Fiddle.js
Please ignore the spinstart and spinstop.
To be honest this is not a selfmade code, I found it on a Website and downloaded it there.
As I had no idea about all that 3D stuff I started to learn it but
my knowledge about 3D cubes with css fails at the point optimizing the sizes of the cube.
I tried adding my sites into the:
<div id="shape">
<div class="ft" id="#ftid">1</div>
<div class="rt" id="#rtid">2</div>
<div class="bk" id="#bkid">3</div>
<div class="lt" id="#ltid">4</div>
<div class="tp" id="#tpid">5</div>
<div class="bm" id="#ftid">6</div>
</div>
The Problem about that was, when I do that the cube breaks, meaning it doesn´t rotate correctly anymore, I don´t know if it was because a webpage is bigger than just 1, 2, 3, 4, 5, 6 although I changed the size of the surfaces to auto so they adapt to the webpage´s css.
Maybe I could correct myself if you guys could give me a short explanation or
pointer on this topic.
Please don´t vote this Question down, I did not find anything similar to this topic on the web. I only found simplified examples and tutorials on 3D cubes.
Note:
I not asking for codes, I´m asking for help.

On click Javascript transform

I am trying to achieve a flip card effect on the click of a button but I can not quite figure out the Javascript. I actually know nothing about Javascript so I have attempted to find similar solutions and alter them to my needs but with no results. Below is the CSS for how it is now as a :hover style.
You can view it here : http://dangoodeofficial.co.uk/290-2
CSS:
.flip3D {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D .front {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg );
-moz-transform: perspective(600px)RotateY( 0deg );
-ms-transform: perspective(600px)RotateY( 0deg );
-webkit-transform: perspective(600px)RotateY( 0deg );
transform: perspective(600px)RotateY( 0deg );
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D .back {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg );
-moz-transform: perspective(600px)RotateY( 180deg );
-ms-transform: perspective(600px)RotateY( 180deg );
-webkit-transform: perspective(600px)RotateY( 180deg );
transform: perspective(600px)RotateY( 180deg );
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D:hover > .front {
-o-transform: perspective(600px)RotateY( -180deg );
-moz-transform: perspective(600px)RotateY( -180deg );
-ms-transform: perspective(600px)RotateY( -180deg );
-webkit-transform: perspective(600px)RotateY( -180deg );
transform: perspective(600px)RotateY( -180deg );
}
.flip3D:hover > .back {
-o-transform: perspective(600px)RotateY( 0deg );
-moz-transform: perspective(600px)RotateY( 0deg );
-ms-transform: perspective(600px)RotateY( 0deg );
-webkit-transform: perspective(600px)RotateY( 0deg );
transform: perspective(600px)RotateY( 0deg );
}
And I have buttons with classes .flip-button for the front and .flip-back for the back.
Any advice would be greatly appreciated. Thank you.
Dan

I found this plugin. It may helps you. And here there is a list of plugin that do flip effect: http://www.sitepoint.com/10-jquery-flip-effect-plugins/
Edited
This may helps you! I only toggle the class .flip in .front and .back . (http://jsfiddle.net/0x13mL26/3/)
Sorry for the misunderstanding! :)

I know you asked for javascript, but my solution is with JQuery. Use a click function on each button and then you can use Jquery's .removeClass and .addClass methods to change the class of the card that needs to be flipped when the button is being clicked. Something like this should work:
$( "#frontbutton" ).click(function() {
$("#flipcard").addClass('back');
$("#flipcard").removeClass('front');
$("#frontbutton").css("display","none");
$("#backbutton").css("display","static");
});
$( "#backbutton2" ).click(function() {
$("#flipcard").addClass('front');
$("#flipcard").removeClass('back');
$("#backbutton").css("display","none");
$("#frontbutton").css("display","static");
});
and of course you will want to hide the "backbutton" initially.
So when you click the front button, it will change the class of the "flipcard" you have making it flip. The "frontbutton" will then hide, and in its place you put the now visible "backbutton". When the back button is clicked, it should trigger the same process but opposite.

CSS Transform happens instantly in Safari

i'm a huge noob just trying to learning to code on my own.. and i'm at the point where i want my code to work in all the popular browsers .. :) .. i'm starting with Safari.. my code runs fine in chrome.. but the -webkit-transition: transform 1.0s; just happens instantly on safari for some reason.. not sure if there is an extra meta tag that I need or something.. but this is my code:
HTML
<section id="prismSection">
<h1 class="text-center">Now a Rectangular Prism</h1>
<div class="prismWrapper">
<div id="prism">
<figure class="front"><p>Front</p></figure>
<figure class="back"><p>Back</p></figure>
<figure class="right"><p class="vertical-text">Right</p></figure>
<figure class="left"><p class="vertical-text2">Left</p></figure>
<figure class="top"><p>Top</p></figure>
<figure class="bottom"><p>Bottom</p></figure>
</div>
</div>
<button class="btn btn-lg btn-primary" onclick="prismFront();">Front</button>
<button class="btn btn-lg btn-primary" onclick="prismBack();">Back</button>
<button class="btn btn-lg btn-primary" onclick="prismRight();">Right</button>
<button class="btn btn-lg btn-primary" onclick="prismLeft();">Left</button>
<button class="btn btn-lg btn-primary" onclick="prismTop();">Top</button>
<button class="btn btn-lg btn-primary" onclick="prismBottom();">Bottom</button>
</section>
CSS
#prismSection {
text-align: center;
padding-bottom: 40px;
}
#prismSection > button {
border: 2px solid black;
}
#prismSection > h1 {
color: white;
font-family: Paytone One, arial;
font-size: 2.5em;
}
#prism > figure:nth-child(1) > p,
#prism > figure:nth-child(2) > p,
#prism > figure:nth-child(3) > p,
#prism > figure:nth-child(4) > p {
color: black;
font-family: Paytone One, arial;
position: relative;
top: 50px;
font-size: 3em;
}
#prism > figure:nth-child(4) > p {
top: 65px;
}
#prism > figure:nth-child(5) > p,
#prism > figure:nth-child(6) > p {
color: black;
font-family: Paytone One, arial;
position: relative;
top: 10px;
font-size: 3em;
}
.vertical-text {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.vertical-text2 {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
.prismWrapper {
margin-top: 50px;
margin-bottom: 50px;
width: 300px;
height: 200px;
position: relative;
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
margin-right: auto;
margin-left: auto;
}
#prism {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
#prism figure {
display: block;
position: absolute;
background: #606060;
border: 2px solid white;
border-radius: 5px;
}
#prism .front,
#prism .back {
width: 296px;
height: 196px;
}
#prism .right,
#prism .left {
width: 96px;
height: 196px;
left: 100px;
}
#prism .top,
#prism .bottom {
width: 296px;
height: 96px;
top: 50px;
}
#prism .front {
transform: rotateY( 0deg ) translateZ( 50px);
-webkit-transform: rotateY( 0deg ) translateZ( 50px);
-ms-transform: rotateY( 0deg ) translateZ( 50px);
-o-transform: rotateY( 0deg ) translateZ( 50px);
-moz-transform: rotateY( 0deg ) translateZ( 50px);
}
#prism .back {
transform: rotateY( 180deg ) translateZ( 50px);
-webkit-transform: rotateY( 180deg ) translateZ( 50px);
-ms-transform: rotateY( 180deg ) translateZ( 50px);
-o-transform: rotateY( 180deg ) translateZ( 50px);
-moz-transform: rotateY( 180deg ) translateZ( 50px);
}
#prism .right {
transform: rotateY( 90deg ) translateZ( 150px );
-webkit-transform: rotateY( 90deg ) translateZ( 150px );
-ms-transform: rotateY( 90deg ) translateZ( 150px );
-o-transform: rotateY( 90deg ) translateZ( 150px );
-moz-transform: rotateY( 90deg ) translateZ( 150px );
}
#prism .left {
transform: rotateY( -90deg ) translateZ( 150px );
-webkit-transform: rotateY( -90deg ) translateZ( 150px );
-ms-transform: rotateY( -90deg ) translateZ( 150px );
-o-transform: rotateY( -90deg ) translateZ( 150px );
-moz-transform: rotateY( -90deg ) translateZ( 150px );
}
#prism .top {
transform: rotatex( 90deg ) translateZ( 100px );
-webkit-transform: rotatex( 90deg ) translateZ( 100px );
-ms-transform: rotatex( 90deg ) translateZ( 100px );
-o-transform: rotatex( 90deg ) translateZ( 100px );
-moz-transform: rotatex( 90deg ) translateZ( 100px );
}
#prism .bottom {
transform: rotatex( -90deg ) translateZ( 100px );
-webkit-transform: rotatex( -90deg ) translateZ( 100px );
-ms-transform: rotatex( -90deg ) translateZ( 100px );
-o-transform: rotatex( -90deg ) translateZ( 100px );
-moz-transform: rotatex( -90deg ) translateZ( 100px );
}
#prism {
transform: translateZ( -100px );
-webkit-transform: translateZ( -100px );
-ms-transform: translateZ( -100px );
-o-transform: translateZ( -100px );
-moz-transform: translateZ( -100px );
}
#prism.show-front {
transform: translateZ( -50px ) rotateY( 0deg );
-webkit-transform: translateZ( -50px ) rotateY( 0deg );
-ms-transform: translateZ( -50px ) rotateY( 0deg );
-o-transform: translateZ( -50px ) rotateY( 0deg );
-moz-transform: translateZ( -50px ) rotateY( 0deg );
}
#prism.show-back {
transform: translateZ( -50px ) rotateY( -180deg );
-webkit-transform: translateZ( -50px ) rotateY( -180deg );
-ms-transform: translateZ( -50px ) rotateY( -180deg );
-o-transform: translateZ( -50px ) rotateY( -180deg );
-moz-transform: translateZ( -50px ) rotateY( -180deg );
}
#prism.show-right {
transform: translateZ( -150px ) rotateY( -90deg );
-webkit-transform: translateZ( -150px ) rotateY( -90deg );
-ms-transform: translateZ( -150px ) rotateY( -90deg );
-o-transform: translateZ( -150px ) rotateY( -90deg );
-moz-transform: translateZ( -150px ) rotateY( -90deg );
}
#prism.show-left {
transform: translateZ( -150px ) rotateY( 90deg );
-webkit-transform: translateZ( -150px ) rotateY( 90deg );
-ms-transform: translateZ( -150px ) rotateY( 90deg );
-o-transform: translateZ( -150px ) rotateY( 90deg );
-moz-transform: translateZ( -150px ) rotateY( 90deg );
}
#prism.show-top {
transform: translateZ( -100px ) rotateX( -90deg );
-webkit-transform: translateZ( -100px ) rotateX( -90deg );
-ms-transform: translateZ( -100px ) rotateX( -90deg );
-o-transform: translateZ( -100px ) rotateX( -90deg );
-moz-transform: translateZ( -100px ) rotateX( -90deg );
}
#prism.show-bottom {
transform: translateZ( -100px ) rotateX( 90deg );
-webkit-transform: translateZ( -100px ) rotateX( 90deg );
-ms-transform: translateZ( -100px ) rotateX( 90deg );
-o-transform: translateZ( -100px ) rotateX( 90deg );
-moz-transform: translateZ( -100px ) rotateX( 90deg );
}
#prism {
transition: transform 1.0s;
-webkit-transition: transform 1.0s;
-ms-transition: transform 1.0s;
-o-transition: transform 1.0s;
-moz-transition: transform 1.0s;
}
Javascript
function prismFront() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-front');
}
function prismBack() {
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-back');
}
function prismRight() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-right');
}
function prismLeft() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-left');
}
function prismTop() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-top');
}
function prismBottom() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-front');
$('#prism').addClass('show-bottom');
}
i'll try to get a jsfiddle working soon.. thanks a ton.
Edit:
I've tried rewriting the button functions using more jquery syntax and giving each button an ID:
<script type="text/javascript">
$(function() {
$('#btnFront').on('click', function() {
$('#prism').css('transform', 'translateZ( -50px ) rotateY( 0deg )');
});
$('#btnBack').on('click', function() {
$('#prism').css('transform', 'translateZ( -50px ) rotateY( -180deg )');
});
$('#btnRight').on('click', function() {
$('#prism').css('transform', 'translateZ( -150px ) rotateY( -90deg )');
});
$('#btnLeft').on('click', function() {
$('#prism').css('transform', 'translateZ( -150px ) rotateY( 90deg )');
});
$('#btnTop').on('click', function() {
$('#prism').css('transform', 'translateZ( -100px ) rotateX( -90deg )');
});
$('#btnBottom').on('click', function() {
$('#prism').css('transform', 'translateZ( -100px ) rotateX( 90deg )');
});
});
</script>
same results.

All your transition rules apply to the "transform" rule but not the prefixed rules like -webkit-transform. Therefore it will not try to apply the transition to a -webkit-transform rule.
Try using: -webkit-transition: -webkit-transform 1.0s;
If that still does not work, use the Web Developer tools in Safari to find out which rules are applied to the elements (invalid rules will be crossed out).
EDIT: JsFiddle for clarity: link

Activate a CSS flip transition

I have been following Adam Khoury's tutorial on how to make a 3d flip animation which works fine with the hover pseudo class but I'm struggling to activate the transition with java script. My aim is to click the box to activate the transition.
https://www.youtube.com/watch?v=W3eJWpvIl0g
Html:
<div class="flip3D" >
<div class="back">Box 1 - Back</div>
<div class="front" >Box 1 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 2 - Back</div>
<div class="front">Box 2 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 3 - Back</div>
<div class="front">Box 3 - Front</div>
CSS:
.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s;
}
.flip3D > .back{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 180deg );
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}
.flip3D:active> .front{
-webkit-transform: perspective( 600px ) rotateY( -180deg );
transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:active > .back{
-webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg ); }
Thank you!

You can use jQuery for that. And trigger the hover event once you click on the box.
Try this
$('.box').click(function () {
$('.animationElement').trigger('hover');
}
This would activate the hover event for the element. More over CSS would take action here and would trigger the animation.
Or you can use a className for that and append the classname to the element.
$('.box').click(function () {
$('.animationElement').attr('class', 'flip3D');
}
Then CSS would do the job.

CSS 3-D Transforms

I have a carousel that is working great using (previous) and (next) buttons. The problem I am having is the fact that when it spins, it doesn't stay in one place. So you can click through the carousel using the previous and next buttons, but the carousel is shifting from left to right and back. How do you make the carousel spin in place? I am assuming it has something to do with the x-axis? What part of the code (CSS or JavaScript) makes the carousel spin in place?
<style media="screen">
.containercaro {
width: 210px;
height: 140px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 1100px;
-moz-perspective: 1100px;
-o-perspective: 1100px;
perspective: 1100px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform: translateZ( -182px );
-moz-transform: translateZ( -182px );
-o-transform: translateZ( -182px );
transform: translateZ( -182px );
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
#carousel figure {
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
border: 2px solid black;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
#carousel figure:nth-child(1) { background: hsla( 0, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(2) { background: hsla( 60, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(3) { background: hsla( 120, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(4) { background: hsla( 180, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(5) { background: hsla( 240, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(6) { background: hsla( 300, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(1) {
-webkit-transform: rotateY( 0deg ) translateZ( 182px );
-moz-transform: rotateY( 0deg ) translateZ( 182px );
-o-transform: rotateY( 0deg ) translateZ( 182px );
transform: rotateY( 0deg ) translateZ( 182px );
}
#carousel figure:nth-child(2) {
-webkit-transform: rotateY( 60deg ) translateZ( 182px );
-moz-transform: rotateY( 60deg ) translateZ( 182px );
-o-transform: rotateY( 60deg ) translateZ( 182px );
transform: rotateY( 60deg ) translateZ( 182px );
}
#carousel figure:nth-child(3) {
-webkit-transform: rotateY( 120deg ) translateZ( 182px );
-moz-transform: rotateY( 120deg ) translateZ( 182px );
-o-transform: rotateY( 120deg ) translateZ( 182px );
transform: rotateY( 120deg ) translateZ( 182px );
}
#carousel figure:nth-child(4) {
-webkit-transform: rotateY( 180deg ) translateZ( 182px );
-moz-transform: rotateY( 180deg ) translateZ( 182px );
-o-transform: rotateY( 180deg ) translateZ( 182px );
transform: rotateY( 180deg ) translateZ( 182px );
}
#carousel figure:nth-child(5) {
-webkit-transform: rotateY( 240deg ) translateZ( 182px );
-moz-transform: rotateY( 240deg ) translateZ( 182px );
-o-transform: rotateY( 240deg ) translateZ( 182px );
transform: rotateY( 240deg ) translateZ( 182px );
}
#carousel figure:nth-child(6) {
-webkit-transform: rotateY( 300deg ) translateZ( 182px );
-moz-transform: rotateY( 300deg ) translateZ( 182px );
-o-transform: rotateY( 300deg ) translateZ( 182px );
transform: rotateY( 300deg ) translateZ( 182px );
}