Flipbox Using Css and Html

Total Views : 420
Zoom In Zoom Out Read Later Print

Create flip-box in css and html.

flipbox.css

@charset "UTF-8";
/* Flipbox Common Styles */
.pd-flipbox-wrap img {
width: 100%;
}
.pd-flipbox-wrap {
display: block;
text-align: center;
position: relative;
margin-bottom: 30px;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.pd-flipbox-wrap .front-part, .pd-flipbox-wrap .back-part {
height: 100%;
margin-bottom: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 400ms;
transition: 400ms;
}
.pd-flipbox-wrap .front-part {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.pd-flipbox-wrap .back-part {
position: absolute;
top: 0;
width: 100%;
}

/* Horizontal Flip Left */
.pd-flipbox-wrap .horizontal-flip-left .front-part {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.pd-flipbox-wrap .horizontal-flip-left:hover .front-part {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.pd-flipbox-wrap .horizontal-flip-left .back-part {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.pd-flipbox-wrap .horizontal-flip-left:hover .back-part {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* Horizontal Flip Right */
.pd-flipbox-wrap .horizontal-flip-right .front-part {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.pd-flipbox-wrap .horizontal-flip-right:hover .front-part {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.pd-flipbox-wrap .horizontal-flip-rigaht .back-part {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.pd-flipbox-wrap .horizontal-flip-right:hover .back-part {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}

box.css

@charset "UTF-8";

/* box Style 1*/
.pd-box-style1 .box-item {
padding: 30px 25px 25px;
position: relative;
text-align: center;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 25px;
}
.pd-box-style1 .box-icon {
font-size: 32px;
display: inline-block;
background-color: #444;
color: #bbb;height: 82px;
width: 82px;text-align: center;
line-height: 82px;
border-radius: 50%;
margin-bottom: 10px;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.pd-box-style1 .box-item:hover .box-icon {
background-color: #222;
color: #fff;
}
.pd-box-style1 .box-title {
display: inline-block;
font-size: 18px;
margin-bottom: 20px;
color: #222;
}
.pd-box-style1 .box-desc p {
font-size: 14px;
line-height: 1.8;
color: #777;
}
.pd-box-style1 .box-desc a {
color: #777;
font-size: 13px;
position: relative;
display: inline-block;
text-decoration: none !important;
margin-top: 8px;
}
.pd-box-style1 .box-desc a:hover {
color: #222;
}

/* Box Style 2*/
.pd-box-style2 .box-item {
padding: 30px 25px 25px;
position: relative;
text-align: center;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 25px;
}
.pd-box-style2 .box-icon {
font-size: 42px;
display: inline-block;
color: #999;
text-align: center;
margin-bottom: 15px;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.pd-box-style2 .box-title {
background-color: #444;
color: #fff;
padding: 15px;
font-size: 17px;
margin-bottom: 30px;
margin-left: -25px;
margin-right: -25px;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.pd-box-style2 .box-item:hover .box-title {
background-color: #222;
}
.pd-box-style2 .box-desc p {
font-size: 14px;
line-height: 1.8;
color: #777;
}
.pd-box-style2 .box-desc a {
position: relative;
display: inline-block;
color: #888;
font-size: 11px;
line-height: normal;
border: 1px solid #e5e5e5;
text-decoration: none !important;
padding: 3px 10px;
margin-top: 20px;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.pd-box-style2 .box-desc a:hover {
color: #222;
border-color: #222;
}

flipbox.html

<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta character set -->
<meta charset="utf-8">
<title>Flipbox</title>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- bootstrap.min -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Main CSS (Not needed, only for demo purpose) -->
<link rel="stylesheet" href="css/main.css">
<!-- Flipbox CSS -->
<link rel="stylesheet" href="css/flipbox.css">
<!-- FlipBox2 CSS -->
<link rel="stylesheet" href="css/box.css">
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- bootstrap.min.js -->
<script src="js/bootstrap.min.js"></script>
</head>
<body id="body">
<main class="site-content">
<section class="sec-spacer sec-color">
<div class="container container-center">
<h3 class="title text-center">Flipbox Style 1 Effect</h3>
<div class="row pd-box-style1">
<div class="col-md-3">
<div class="pd-flipbox-wrap">
<div class="horizontal-flip-left">
<div class="front-part">
<div class="box-item">
<div class="box-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="box-desc">
<h2 class="box-title">Box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</p>
<a href="#">Learn More <i class="fa fa-arrow-circle-o-right"></i></a>
</div>
</div>
</div>
<div class="back-part">
<div class="box-item">
<div class="box-icon">
<i class="fa fa-gear"></i>
</div>
<div class="box-desc">
<h2 class="box-title">Flipped Box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</p>
<a href="#">Learn More <i class="fa fa-arrow-circle-o-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="pd-flipbox-wrap">
<div class="horizontal-flip-left">
<div class="front-part">
<div class="box-item">
<div class="box-icon">
<i class="fa fa-tablet"></i>
</div>
<div class="box-desc">
<h2 class="box-title">Box 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</p>
<a href="#">Learn More <i class="fa fa-arrow-circle-o-right"></i></a>
</div>
</div>
</div>
<div class="back-part">
<div class="box-item">
<div class="box-icon">
<i class="fa fa-support"></i>
</div>
<div class="box-desc">
<h2 class="box-title">Filpped Box 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</p>
<a href="#">Learn More <i class="fa fa-arrow-circle-o-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sec-spacer">
<div class="container container-center">
<h3 class="title text-center">Flipbox Style 2 Effect</h3>
<div class="row pd-box-style2">
<div class="col-md-3">
<div class="pd-flipbox-wrap">
<div class="horizontal-flip-left">
<div class="front-part">
<div class="box-item">
<div class="box-icon">
<i class="fa fa-lightbulb-o"></i>
</div>
<div class="box-desc">
<h2 class="box-title">Box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</p>
<a href="#">Learn More <i class="fa fa-arrow-circle-o-right"></i></a>
</div>
</div>
</div>
<div class="back-part">
<div class="box-item">
<div class="box-icon">
<i class="fa fa-gear"></i>
</div>
<div class="box-desc">
<h2 class="box-title"> Flipped Box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</p>
<a href="#">Learn More <i class="fa fa-arrow-circle-o-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="pd-flipbox-wrap">
<div class="horizontal-flip-left">
<div class="front-part">
<div class="box-item">
<div class="box-icon">
<i class="fa fa-tablet"></i>
</div>
<div class="box-desc">
<h2 class="box-title">Box 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et.</p>
<a href="#">Learn More <i class="fa fa-arrow-circle-o-right"></i></a>
</div>
</div>
</div>
<div class="back-part">
<div class="box-item">
<div class="box-icon">
<i class="fa fa-support"></i>
</div>
<div class="box-desc">
<h2 class="box-title">Flipped Box 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et .</p>
<a href="#">Learn More <i class="fa fa-arrow-circle-o-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>

See More

Latest Photos