Techumber

Amazing Pure CSS3 Flip Effect Design

Github avatar
Dimpu
June 16, 2013. 3 min read

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(0undefined0undefined0undefined0.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(255undefined255undefined255undefined0.2)undefined
inset 0 0 3px rgba(115undefined114undefined 23undefined 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(0undefined1undefined0undefined180deg);
-moz-transform: rotate3d(0undefined1undefined0undefined180deg);
-o-transform: rotate3d(0undefined1undefined0undefined180deg);
-ms-transform: rotate3d(0undefined1undefined0undefined180deg);
transform: rotate3d(0undefined1undefined0undefined180deg);

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

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

Hope you like it!


...