the Objective

To make a div that flips on hover without using javascript

Languages

HTML

CSS

the HTML

<div class=”flip-container” ontouchstart=”this.classList.toggle(‘hover’);”>

First, place the outer container. This container will house the content to be flipped. Use ontouchstart=”this.classList.toggle(‘hover’);”> to enable the hover state for this div on touch devices.

<div class=”flipper”></div>

Next you will need to place the panel that will flip. This div will contain the front and back of the flipping content.

<div class=”front”>front content</div>

Put any content you want in the front. This is the content that will show first

<div class=”back”>backcontent</div>

the CSS

Set perspective
.flip-container { perspective: 350px;
}

This is the outer container that house the content to be flipped. The perspective will determine the perspective appearance of the flipped content during its flip.

Set to flip on hover, set amount of spin .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(200deg); }

This CSS tells the browser to flip the content along the Y axis by 200 degrees. See above how the flip card looks skewed when its flipped? That’s because of the combination of persepctive and rotateY values.

Set sizes
.flip-container, .front, .back { width: 300px; height: 300px;
}

This is the size I used for my flipping divs. You can change it to suit your purposes.

Set speed and 3d style
.flipper { transition: 0.6s; transform-style: preserve-3d; position: relative;
}

The transition element sets the transition time for the animation. Transform-style: preserve 3d makes the browser preserve the nesting of the elements in 3d space. This way they move together.

Hide backface initially
.front, .back { backface-visibility: hidden; padding: 10px; position: absolute; top: 0; left: 0;
}

This hides the back face initially.

Keep front above back initially
.front { z-index: 2; transform: rotateY(0deg);
}

This ensures that the front face is above the back.

Sets the back to be initially reversed.
.back { transform: rotateY(180deg);
}