Amazing Pure CSS3 Flip Effect Design

Published on June 16, 2013

Hi guys, in this post i am gonna show you how to create most amazing Flip effect using pure css3. Yes! we are not going to use any images in this design. We will use only Advanced css3 properties. We will use css3 “transition”,“perspective”,“backface” to achieve this effect. The other properties are quite normal. So let’s dive in swim into the code.

Demo

Download

HTML

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
</head>
<body>
<div class="container">
<header>
<h1 class="logo">
<a href="//techumber.com">
Techumber.com
</a>
</h1>
</header>
<section class="contant">
<div id="tu-css3flip">
<ul>
<li>
<div class="tu-item tu-item-1">
<div class="tu-info-wrap">
<div class="tu-info">
<div class="tu-info-front tu-item-1">
<h3> Web Design</h3>
</div>
<div class="tu-info-back">
<p>
We will make most amazing web designs for you.
</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="tu-item tu-item-2">
<div class="tu-info-wrap">
<div class="tu-info">
<div class="tu-info-front tu-item-2">
<h3> Web Development </span> </h3>
</div>
<div class="tu-info-back">
<p>
We will develop complete web solutions for your business needs.
</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="tu-item tu-item-3">
<div class="tu-info-wrap">
<div class="tu-info">
<div class="tu-info-front tu-item-3">
<h3>Web Codeing</h3>
</div>
<div class="tu-info-back">
<p>
We will code for you with great techniques applied.
</p>
</div>
</div>
</div>
</div>
</li>

</ul>
</div>
</section>
</div>
</body>
</html>

style.css

#tu-css3flip ul {
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
  display: block;
  text-align: center;
  width: 100%;
}
#tu-css3flip ul:after {
  clear: both;
}
#tu-css3flip ul li {
  width: 280px;
  height: 280px;
  display: inline-block;
  margin: 20px;
}
.tu-item {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: default;
}
.tu-info-wrap {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  top: 10px;
  left: 10px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  -ms-perspective: 800px;
  perspective: 800px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 23, 0.8);
}
.tu-info-back h4 {
  padding-top: 40px;
}
.tu-info {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;

  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.tu-info > div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-position: center center;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tu-info .tu-info-back {
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  -moz-transform: rotate3d(0, 1, 0, 180deg);
  -o-transform: rotate3d(0, 1, 0, 180deg);
  -ms-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg);

  background: RGBA(35, 35, 29, 0.99);
}
.tu-item-1 {
  background: rgb(45, 200, 111);
}
.tu-item-2 {
  background: rgb(52, 152, 219);
}
.tu-item-3 {
  background: rgb(155, 89, 182);
}
.tu-info h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 15px;
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 260px;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tu-info p {
  color: #fff;
  padding: 121px 5px;
  font-style: italic;
  font-size: 16px;
}
.tu-info p a:hover {
  color: #fff222;
  color: rgba(255, 242, 34, 0.8);
}

.tu-item:hover .tu-info-wrap {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(115, 114, 23, 0.8);
}
.tu-item:hover .tu-info {
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
  -moz-transform: rotate3d(0, 1, 0, -180deg);
  -o-transform: rotate3d(0, 1, 0, -180deg);
  -ms-transform: rotate3d(0, 1, 0, -180deg);
  transform: rotate3d(0, 1, 0, -180deg);
}

Hope you like it!