Mobile app version of vmapp.org
Login or Join
YK2262411

: Recreate a 3D rotating prism effect in a web browser I'm trying to find a way how to do this 3D Transition when box hover my self. I know when I look to it that it's made using CSS 3D

@YK2262411

Posted in: #Css #Transform #WebsiteDesign

I'm trying to find a way how to do this 3D Transition when box hover my self. I know when I look to it that it's made using CSS 3D & parallax effects. Is there an already made jQuery plugin or CSS3 example of this?

Any help would be greatly appreciated. Thanks in advance for your feedback!

What I've tried so far:

HTML

<div class="cube">
<div class="flippety">
<h1>Flippity</h1>
</div>
<div class="flop">
<h2>Flop</h2>
</div>
</div>


CSS

/* Set-up */
body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #F4F6F8 ;
padding: 3em 0 0 0;
line-height: 62px;
-webkit-perspective: 1000px; /* <-NB */
}

/* Container box to set the sides relative to */
.cube {
width: 30%;
text-align: center;
margin: 0 auto;

height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
}

/* The two faces of the cube */
.flippety,.flop {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
height: 98px;
}

/* Position the faces */
.flippety {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
background-color: black;
}

.flop {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
background-color: red;
}

/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}


The problem is that when I change the position of the box, the animation doesn't work properly. And when I change the size, on mouse hover the prism rotates but part of the front face still appears when it shouldn't.

Live Demo

10.02% popularity Vote Up Vote Down

Login to follow query

More posts by @YK2262411

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

 

@Murphy569

The issue is that the perspective is set on the body, so all of the transforms are in respect to the transform-origin of the body (which is by default 50% 50%, or in the middle of it).

To get the effect you want, you want to make the perspective in respect to an intermediate element, which you can do by putting another wrapper around the element. In the end, it'll look like this:

<div class="cube">
<div class="inner">
<div class="flippety">
<h1>Flippity</h1>
</div>
<div class="flop">
<h2>Flop</h2>
</div>
</div>
</div>


with the CSS:

.cube {
-webkit-perspective: 1000px;
}
.inner {
transform-style: preserve-3d;
transition: transform .33s;
height:100%;
}

/* Position the faces */
.flippety {
transform: translateZ(50px);
}

.flop {
transform: rotateX(-90deg) translateZ(-50px);
}

/* Rotate the cube */
.inner:hover {
transform: rotateX(89.999deg); /* Text bleed at 90º */
}


You can, of course, work around adding another container by messing with the transform origin and using an additional translateY, but using an extra container is the proper way to do it.

Side note: from a semantic perspective you shouldn't use h1s inside of a something like this. They should be used for page titles and be limited to 1 a page.

10% popularity Vote Up Vote Down

 

@Turnbaugh909

Here's a horizontal rotating version using only CSS.
jsfiddle.net/QMQLQ/

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme