How to make a hidden face appear from the top using -webkit-transform: rotateX();


Tags: html,css,css3,css-animations

Problem :

I'm trying to do this 3D transformation effect using css transform :

enter image description here

In my attempt the hidden face appears from the right while it needs to appear from the bottom in mouse hover, I don't know what i'm doing wrong , any help on how to fix this would be greatly appreciated, thanks in advance for your feedback.

LIVE DEMO

HTML

<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
            <img src='http://placehold.it/180x180/' alt=''>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>
<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
            <img src='http://placehold.it/180x180/' alt=''>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>

CSS

.box-scene {
    -webkit-perspective: 700;
    width: 400px;
    height: 200px;
    margin: auto;

    z-index: 999;
}
.box-scene:hover .box {
    -webkit-transform: rotateX(-90deg);
}
.box {
    width: 180px;
    height: 180px;
    position: relative;

    -webkit-transform-style: preserve-3d;

    -webkit-transition: all 0.4s ease-out;
    -webkit-transform-origin: 90px -90px -90px;

    /* float: left; */
    margin: 30px auto;


}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: visible; 

    -webkit-transform-origin: 0 0;
}
.front {
    -webkit-transform: rotateY(0deg);
    z-index: 2;
    background: #d9d9d9;
}
.side {
    background: #9dcc78;
    -webkit-transform: rotateY(90deg);
    z-index: 1;
    left: 180px;
}


Solution :

If the hidden face shall come from the bottom, you have to change its position and some of the initial rotation. Here's the new fiddle.
If you want it to come from the side the only thing to change is replacing rotateX(-90deg) with rotateY(-90deg) for the .box-scene:hover .box part. See fiddle.


    CSS Howto..

    How to override cloudmade maps css with your own css? [closed]

    CSS: how to apply styles to the last of a CSS class (not the last of )

    How do I expand this CSS list?

    Showing HTML page with CSS attached in a WebView

    How To Get Circle Image Between
    Tag Like Tumblr In HTML? [closed]

    How to set a width of the background (HTML and CSS)

    How to use css media query to switch animations

    How to @import without including all CSS but just the @extends ones

    How do I get my menu to drop down? CSS & HTML

    How can I get a left-navigation column to fill the entire left side of the middle of a webpage using CSS?

    webkit just cuts off decimals in css number … how to workaround?

    How to break a overflowed navigation bar via CSS

    Codeigniter: how to access css files from different views?

    How to adjust the size of the input component?

    Fade in/out text slideshow

    How to achieve a fancy outline around an image in CSS

    How to temporarily modify the CSS of an element

    How to float images left and right without text wraps

    How can i achieve this style in Html/Css?

    Writing “$('#dialog').modal('show');” as plain javascript?

    How to apply External CSS to Html Helper Class Elements?

    How can we avoid the shake when we hover over an element and set its border?

    CSS only - how to have a scrolling ul with all li on one line

    How to reference a .css file on a razor view?

    CSS: How to fix overlapping divs

    How to hide a div from another div using CSS

    How to remove the blue halo glow from jQuery Mobile input elements that receive focus

    How to set ASP dropdownlist to read only with css or javascript?

    In firefox, how to change color of text in a treecell using javascript

    How to make image clickable if -1 z-index is given to create box-shadow?