CSS 3D Transforms

CSS 3D offers some powerful features to designers and developers that can win the hearts of users if done with good measure.

Demo

Hover me to view my back side
Hover out me to view my front side

The HTML Markup

<div class="container">
	<div class="box-front">
		Hover me to view my back side
	</div>
	<div class="box-back">
		Hover out me to view my front side
	</div>
</div>

The CSS

<style>
.container{
		/* How pronounced should the 3D effects be */
		perspective: 800px;
		-webkit-perspective: 800px;
		background: radial-gradient(#e0e0e0, #aaa);
		width:100%;
		height:300px;
		border-radius:6px;
		position:relative;
		}
.box-front,
		.box-back{
 		/* Enable 3D transforms */
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		 backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		 width:50%;
		height:80%;
		position:absolute;
		top:10%;
		left:25%;
		background:#476AF1;
 		/* Animate the transitions */
		transition:0.8s; text-align:center;
		color:#FFF;
		}
.box-back{
 		/* The back side is flipped 180 deg by default */
		transform:rotateY(180deg);
		-webkit-transform:rotateY(180deg);
		background-color:#7E0002;
 
		}
.container:hover .box-front{
		/* When the container is hovered, flip the front side and hide it .. */
		transform:rotateY(180deg);
		-webkit-transform:rotateY(180deg);
		}
.container:hover .box-back{
		/* .. at the same time flip the back side into visibility */
		transform:rotateY(360deg);
		-webkit-transform:rotateY(360deg);
		}
</style>

If you want to learn more about 3D CSS, take a look at this detailed introduction. If you don’t need to target old IE, browser support is also very good.

Try Your Self Download

  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.