I have started a 3D rotating image carousel which works fine in Chrome & Firefox but not IE.
I know that IE10+ doesn't yet support the preserve-3d tag but there is meant to be a workaround of putting the transforms on the children, but I can't get it to work.
Any ideas and help will be most welcome.
http://codepen.io/gnm67/pen/izyjs
#Carousel {
display: block;
margin:100px auto 20px auto;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective-origin: 50% 100px;
-ms-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
}
#Spinner {
position: relative;
margin: 0 auto;
height: 350px;
width: 500px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 400px 0px;
-moz-transform-origin: 50% 400px 0px;
-ms-transform-origin: 50% 400px 0px;
transform-origin: 50% 400px 0px;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
-ms-perspective: 1000px;
}
#Carousel .face {
position: absolute;
height: 350px;
width: 500px;
padding: 0px;
}
#Carousel img {
width:500px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}
#Spinner .f0 {
-webkit-transform: rotateY(0deg) translateZ(344px);
-moz-transform: rotateY(0deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(0deg) translateZ(344px);
transform: rotateY(0deg) translateZ(344px);
}
#Spinner .f1 {
-webkit-transform: rotateY(72deg) translateZ(344px);
-moz-transform: rotateY(72deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(72deg) translateZ(344px);
transform: rotateY(72deg) translateZ(344px);
}
#Spinner .f2 {
-webkit-transform: rotateY(144deg) translateZ(344px);
-moz-transform: rotateY(144deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(144deg) translateZ(344px);
transform: rotateY(144deg) translateZ(344px);
}
#Spinner .f3 {
-webkit-transform: rotateY(216deg) translateZ(344px);
-moz-transform: rotateY(216deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(216deg) translateZ(344px);
transform: rotateY(216deg) translateZ(344px);
}
#Spinner .f4 {
-webkit-transform: rotateY(288deg) translateZ(344px);
-moz-transform: rotateY(288deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(288deg) translateZ(344px);
transform: rotateY(288deg) translateZ(344px);
}
Note that the -ms- prefix is deprecated, it was supposed to be used only in the release preview, as of the final IE10 the unprefixed properties are supported, which will overwrite the prefixed ones!
That being said, you'll have to change the position of the individual faces instead of rotating the container.
I found the easiest is to shift the faces transform origin into the center, that way you only have to rotate the faces to get the animation running.
Here's a bare to the bones example based on your code: http://jsfiddle.net/k1m045uu/
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#Carousel {
display: block;
margin:100px auto 20px auto;
}
#Spinner {
position: relative;
margin: 0 auto;
height: 350px;
width: 500px;
}
#Carousel .face {
position: absolute;
height: 350px;
width: 500px;
transform-origin: 50% 50% -250px;
transition: all 1.0s ease-in-out;
}
#Carousel img {
width: 500px;
box-shadow: 0 0 0 1px #000;
}
#Spinner .f0 {
transform: perspective(1000px) rotateY(0deg) translateZ(95px);
}
#Spinner .f1 {
transform: perspective(1000px) rotateY(72deg) translateZ(95px);
}
#Spinner .f2 {
transform: perspective(1000px) rotateY(144deg) translateZ(95px);
}
#Spinner .f3 {
transform: perspective(1000px) rotateY(216deg) translateZ(95px);
}
#Spinner .f4 {
transform: perspective(1000px) rotateY(288deg) translateZ(95px);
}
</style>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
</head>
<body>
<div id="Carousel">
Previous Next
<div id="Spinner">
<img class="face f0" src="img/test1.jpg" />
<img class="face f1" src="img/test2.jpg" />
<img class="face f2" src="img/test3.jpg" />
<img class="face f3" src="img/test4.jpg" />
<img class="face f4" src="img/test5.jpg" />
</div>
</div>
<script>
var elements = $('.face');
var rotates = [0, 72, 144, 216, 288];
function rotate(deg)
{
elements.each(function(index)
{
rotates[index] = rotates[index] + deg;
$(this).css('transform', 'perspective(1000px) rotateY(' + rotates[index] + 'deg) translateZ(95px)');
});
}
</script>
</body>
</html>
See also How to recreate perspective-origin effect by transforming child elements? for some more info regarding perspective origin and a further example.
Related
I have never done animations in CSS, what I'm trying to get is something like cog's animations two circles spinning, one to the right and the other to the left without overlapping...
I think I got the animation(sort of) but not the drawing I think..
I have this demo: https://jsfiddle.net/Tankers/8dxh94zp/9/
the "figures" are correct and the location also correct but the animation is not.
when they spin it overlaps may be is because the object are not 100% squares?, what need to be visible is just half circles just the way that is in my demo..
HTML
<div class="wrap">
<div class="top"></div>
<div class="bott"></div>
</div>
CSS
#keyframes half_spin {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-ms-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
60% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
100% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.wrap {
display: block;
overflow: hidden;
position: relative
}
.top {
width: 300px;
height: 150px;
border: 1px solid red;
border-bottom-left-radius: 151px;
border-bottom-right-radius: 151px;
position: relative;
animation: half_spin 5000ms ease-in-out infinite;
}
.top:before {
position: absolute;
width: 100%;
height: 1px;
background: red;
content: " ";
top: 0;
left: 0;
}
.bott {
width: 300px;
height: 150px;
border: 1px solid black;
border-top-left-radius: 151px;
border-top-right-radius: 151px;
animation: half_spin 5000ms ease-in-out infinite reverse;
position: relative;
}
.bott:before {
position: absolute;
width: 100%;
height: 1px;
background: black;
content: " ";
bottom: 0;
left :0;
}
If I understand your question correctly, this code snippet is what you're looking for. I added a transform-origin property to both the top and bottom half-circles to specify the point that we're rotating around.
Both divs should rotate around the midpoint of their flat edge, for the top that is transform-origin: 50% 0%; and for the bottom it is transform-origin: 50% 100%;
#keyframes half_spin {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-ms-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
60% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
100% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.wrap {
display: block;
overflow: hidden;
position: relative
}
.top {
width: 300px;
height: 150px;
border: 1px solid red;
border-bottom-left-radius: 151px;
border-bottom-right-radius: 151px;
position: relative;
animation: half_spin 5000ms ease-in-out infinite;
transform-origin: 50% 0%;
}
.top:before {
position: absolute;
width: 100%;
height: 1px;
background: red;
content: " ";
top: 0;
left: 0;
}
.bott {
width: 300px;
height: 150px;
border: 1px solid black;
border-top-left-radius: 151px;
border-top-right-radius: 151px;
animation: half_spin 5000ms ease-in-out infinite;
position: relative;
transform-origin: 50% 100%;
}
.bott:before {
position: absolute;
width: 100%;
height: 1px;
background: black;
content: " ";
bottom: 0;
left :0;
}
<div class="wrap">
<div class="top">
</div>
<div class="bott">
</div>
</div>
I have the following HTML and CSS code to draw the top of a cube. So it moves down and I want it to animate as if it is opening up. I am unable to figure out how to transform the top so that it appears to open up.
I have included the entire code for the cube. With respect to this, I want the top to open up.
.pers500 {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
-webkit-perspective-origin: 150% 150%;
-webkit-transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
-webkit-transform: translateZ(50px) translateX(171px) translateY(222px);
-moz-transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.4em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px);
-webkit-transform: skewY(40deg) translateZ(50px) translateY(65px) translateX(-20px);
-moz-transform: skewY(40deg) translateZ(50px) translateY(62px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.7em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
-webkit-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
-moz-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
/*0% {transform:rotateX(30deg);}
50% {transform:rotateX(30deg);}
100% {transform:rotateX(30deg);} commented code here doesn't work*/
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
To make the cube open up, you first need to set the transform-origin property (as mentioned in the other answer) to top. This setting would make the top side of the .face.top remain fixed when the rotation is being performed. Then you need to add the rotation using rotateX(). This would rotate the top face to produce the opening effect. Note that the transform property should contain the entire list of transforms for it to open correctly. You cannot just add the rotateX() alone within the animation.
.pers500 {
perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
border: 1px solid brown; /* just for testing */
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.43em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px) translateY(64px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.69em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
transform-origin: top;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
0% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
}
100% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(200deg);
}
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
Note:
Setting a transform-origin will affect the position of the top face in the demo and so the values that you've used for translateX() and translateY() on the top face need to be modified a bit like in the above demo.
The vendor prefixed versions of properties should always be added before the standard property in order to be future proof.
I have removed the vendor prefixed versions in the above snippet just to keep it simple.
Set the transform origin to tbe edge of the cube with
transform-origin: 0 50% 0;
Then rotate it around the z axis:
transform: rotateZ(90deg);
I hope this works for you, I didn't have the chance to test it.
Trying to make a cube that spins but it wobbles up and down when it rotates think its got something to do with transform origin. Tried messing around with different values for the cube but it only becomes more exaggerated.
/* Chrome, Safari, Opera */
#keyframes spin-vertical
{
0% { -webkit-transform: rotateX(0); }
100% { -webkit-transform: rotateX(-360deg); }
}
/* Standard syntax */
#-webkit-keyframes spin-vertical
{
0% { -webkit-transform: rotateX(0); }
100% { -webkit-transform: rotateX(-360deg); }
}
body
{
font: normal 30px "HelveticaNeue-Light", sans-serif;
}
.wrapper
{
margin: 200px;
background-color: black;
}
.face
{
background-color: black;
color: white;
padding: 2px 5px;
position: absolute;
width: 300px;
}
.cube
{
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin-vertical 5s infinite linear;
-moz-transform-origin: 10px 18px;
-ms-transform-origin: 10px 18px;
-o-transform-origin: 10px 18px;
-webkit-transform-origin: 10px 18px;
transform-origin: 10px 18px;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
margin: 0 auto;
}
#top
{
-moz-transform: rotatex(-270deg) translatey(-40px);
-ms-transform: rotatex(-270deg) translatey(-40px);
-o-transform: rotatex(-270deg) translatey(-40px);
-webkit-transform: rotatex(-270deg) translatey(-40px);
transform: rotatex(-270deg) translatey(-40px);
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
-webkit-transform-origin: top center;
transform-origin: top center
}
#bottom
{
-moz-transform: rotatex(90deg) translatey(0);
-ms-transform: rotatex(90deg) translatey(0);
-o-transform: rotatex(90deg) translatey(0);
-webkit-transform: rotatex(90deg) translatey(0);
transform: rotatex(90deg) translatey(0);
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
-webkit-transform-origin: bottom center;
transform-origin: bottom center
}
#back
{
-moz-transform: translatez(-40px) rotatex(-180deg);
-ms-transform: translatez(-40px) rotatex(-180deg);
-o-transform: translatez(-40px) rotatex(-180deg);
-webkit-transform: translatez(-40px) rotatex(-180deg);
transform: translatez(-40px) rotatex(-180deg)
}
#front
{
-moz-transform: translatez(40px);
-ms-transform: translatez(40px);
-o-transform: translatez(40px);
-webkit-transform: translatez(40px);
transform: translatez(40px)
}
<body>
<div class="wrapper">
<div class="cube" id="cuberotate">
<div class="face" id="front">FACE 1</div>
<div class="face" id="top">FACE 4</div>
<div class="face" id="bottom">FACE 2</div>
<div class="face" id="back">FACE 3</div>
</div>
</div>
</body>
JSFiddle: https://jsfiddle.net/w1kc28zp/
Any advice would be great.
Done some updates to how the sides are transformed, also you're right about transform-origin. On the cube element it should be "0 20px" where 20px stands for 50% of the height of each side.
See result at: https://jsfiddle.net/w1kc28zp/1/
.cube {
margin: 0 auto;
width:300px;
position:relative;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin:0 20px;
-webkit-animation: spin-vertical 5s infinite linear;
}
#front {
-webkit-transform: translateZ(20px);
}
#top {
transform: rotateX(-270deg) translateY(-20px);
transform-origin:top center;
}
#back {
transform: translateZ(-20px) rotateX(180deg);
}
#bottom {
transform: rotateX(-90deg) translateY(20px);
transform-origin:bottom center;
}
I've got some boxes (think oblong chocolate boxes) that I want to unfold and show the contents of. The content will be another div with text, video etc., but I'm currently concerned with the unfolding animation itself.
I've got it sort of working, but the top two divs leave a gap between them while animating. Is there some way I can link them together while 'unfolding' them?
Demo: JSFiddle
HTML:
<section>
<div class="block3d">
<div class="front">
<h4>CHOCOLATE</h4>
</div>
<div class="top"><h4></h4></div>
<div class="back">
<ul>
<li>Chocolate</li>
<li>Milk</li>
<li>Nuts</li>
<li>Oranges</li>
</ul>
<a class="infolink" href="#">Open me</a>
</div>
<div class="bottom"><h4></h4></div>
</div>
</section>
Javascript:
$(document).ready(function(){
$(".block3d .infolink").click(function(e){
openBlock(this, e);
});
});
function openBlock(element, event)
{
event.preventDefault();
$(element).closest('section').addClass('open');
$.scrollTo($(element).closest('section'), {duration: 1000});
}
CSS:
section
{
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-ms-perspective: 800px;
-ms-perspective-origin: 50% 100px;
perspective: 800px;
perspective-origin: 50% 100px;
width: 960px;
height: 240px;
margin: 10px auto;
transition-property: height;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 100ms;
}
section.open
{
height: 960px;
}
.block3d
{
position: relative;
width: 960px;
height: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 0 auto;
-webkit-transform-origin: 0 100px;
-moz-transform-origin: 0 100px;
-ms-transform-origin: 0 100px;
transform-origin: 0 100px;
transition-property: transform, display;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 100ms;
}
.block3d:hover, .open .block3d
{
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
/* Positioning of the different faces of the block */
.block3d div
{
position: absolute;
width: 960px;
height: 200px;
background-color: rgba(0,0,0,0.4);
color: #FFFFFF;
}
.block3d .back
{
-webkit-transform: translateZ(-100px) rotateX(180deg);
-moz-transform: translateZ(-100px) rotateX(180deg);
-ms-transform: translateZ(-100px) rotateX(180deg);
transform: translateZ(-100px) rotateX(180deg);
background-color: #323232;
}
.block3d .top
{
-webkit-transform: rotateX(-270deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform: rotateX(-270deg) translateY(-100px);
-moz-transform-origin: top center;
-ms-transform: rotateX(-270deg) translateY(-100px);
-ms-transform-origin: top center;
transform: rotateX(-270deg) translateY(-100px);
transform-origin: top center;
}
.block3d .bottom
{
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
.block3d .front
{
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
/* Div content styling */
.block3d h4, .block3d ul
{
margin-left: 480px;
background-color: #323232;
margin-top: 0;
}
.block3d h4
{
font-size: 20px;
text-align: center;
padding-top: 90px;
height: 110px;
width: 300px;
}
.block3d ul
{
padding: 40px;
height: auto;
width: 220px;
}
.block3d .infolink
{
display: block;
margin-left: 455px;
height: 30px;
width: 100px;
color: #ffffff;
text-align: center;
padding: 2px;
border: 1px dashed #FFFFFF;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom: 0;
}
/* Open animations for the different parts */
.open .block3d .top
{
-webkit-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
-moz-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 0s;
}
#-webkit-keyframes openback
{
0% {-webkit-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {-webkit-transform: rotateX(270deg) translateZ(300px)}
100% {-webkit-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
#-moz-keyframes openback
{
0% {-moz-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {-moz-transform: rotateX(270deg) translateZ(300px)}
100% {-moz-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
#keyframes openback
{
0% {transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {transform: rotateX(270deg) translateZ(300px)}
100% {transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
.open .block3d .back
{
-webkit-animation: openback 1s 1 linear forwards;
-moz-animation: openback 1s 1 linear forwards;
animation: openback 1s 1 linear forwards;
}
.open .block3d .bottom
{
-webkit-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
-moz-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
transform: rotateX(-360deg) translateZ(100px) translateY(200px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 0.0s;
}
/* Move the block into place */
.open .block3d
{
-webkit-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
-moz-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
transform: translateZ(100px) rotateX(180deg) translateY(-440px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 1s;
transition-delay: 0s;
}
If you are looking for cool paper fold/unfolding animations take a look at this tutorial and here is the code on git. I'd look specifically the pfold.jquery.js file in order to achieve this sort of animation.
Although it might take a little tweaking of the js/css to get it to look how you want since this is for unfolding paper instead of unwrapping a box, but the basic animation is there.
You can add a 1px pseudo element to the top and bottom of the intersecting elements. You may want to add this during the animation and then remove it after so you don't see extra space when it has stopped.
Here is a JSFiddle
Relevant CSS
.back {
position: absolute;
top: -1px;
margin-top: 1px;
margin-bottom: 1px;
}
.block3d h4
{
display: block;
position: absolute;
top: -1px;
font-size: 20px;
text-align: center;
padding-top: 90px;
height: 110px;
width: 300px;
margin-top: 1px;
margin-bottom: 1px;
}
.block3d h4:before,
.block3d h4:after,
.back:before,
.back:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #323232;
}
.block3d h4:before,
.back:before {
top: -1px;
}
.block3d h4:after,
.back:after {
bottom: -1px;
}
I would like to reproduce this jsfiddle I that prepared based on this awesome tutorial (please check the demo). But I don't want the keys functionality, just on hover.
http://jsfiddle.net/b5rmW/5/
But that only uses 2 faces (front and back).
I tried, like this:
#cube {
position: relative;
margin: 100px auto 0;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform .5s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform .5s linear;
-moz-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 300px;
width: 300px;
padding: 0px;
background-color: rgba(50, 50, 50, 1);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(150px);
-moz-transform: rotateX(90deg) translateZ(150px);
background:red;
}
#cube .two {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
background:gold;
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(150px);
-moz-transform: rotateY(90deg) translateZ(150px);
background:blue;
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
background:green;
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(150px);
-moz-transform: rotateY(-90deg) translateZ(150px);
background:orange;
}
#cube .six {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
}
#cube:hover{
transform:rotateY(90deg);
}
http://jsfiddle.net/5XTeU/1/
But the effect seems not to be the same.
What do you think is the minimum divs needed to achieve this first fiddle??
Thanks.
Update: So a slight misunderstanding on which faces need to exist… so this update is for a front and side face rotation.
However, in the original answer below, points 1) and 2) are still valid problems with the code. Points 3) and 4) no longer apply since they were concerned with the back face. The remaining CSS rules can be removed. You could also pull in the perspective wrapper to give the cube a "less flat" look - see updated demo.
HTML
<div id="experiment">
<div class="cube">
<div class="face front">
front face
</div>
<div class="face side">
side face
</div>
</div>
</div>
CSS
#experiment {
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800;
-moz-perspective-origin: 50% 200px;
}
.cube {
position: relative;
margin: 100px auto 0;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform .5s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform .5s linear;
-moz-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 300px;
width: 300px;
padding: 0px;
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
.cube .front {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
background-color:red;
}
.cube .side {
-webkit-transform: rotateY(-90deg) translateZ(150px);
-moz-transform: rotateY(-90deg) translateZ(150px);
background-color:orange;
}
.cube:hover{
-webkit-transform:rotateY(90deg);
}
Original Answer
There are 4 problems with the demo code, so let's look at them individually and see what the solution to each one is:
1) the HTML has a typo on class for the front face - it is missing an r
<div class="face font"> instead of <div class="face front">
2) For Webkit browsers you need to use the prefixed property for transform
-webkit-transform:rotateY(90deg); instead of transform:rotateY(90deg);
3) The back face you have chosen is the wrong face. You have repurposed the left face by accident. The front face is correct, which is a <div> translated 150px outwards. So the corresponding back face should be the one translated -150px inwards. However, if we just do that, the position would be correct but when rotated around the centre of the cube the back face would end up backwards. So the correct back face is the one that is initially rotated by 180° around the Y axis. However, by rotating around the Y axis the translation along Z still needs to be +150px and not -150px.
.cube .back{
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
background:orange;
}
4) The rotation to get the back face into the position where the front starts should be a rotation of 180° and not 90°
.cube:hover{
-webkit-transform:rotateY(180deg);
}
Putting all those changes together gives this demo.
HTML
<div class="cube">
<div class="face front">
front face
</div>
<div class="face back">
back face
</div>
</div>
CSS
.cube {
position: relative;
margin: 100px auto 0;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform .5s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform .5s linear;
-moz-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 300px;
width: 300px;
padding: 0px;
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
.cube .front {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
background-color: red;
}
.cube .back {
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
background:orange;
}
.cube:hover{
-webkit-transform:rotateY(180deg);
-moz-transform: rotateY(180deg);
transform:rotateY(180deg);
}