image flip using css and html

   No comments

In this part we will study how to image flip using html and css. In this part when we hover on the images will be show animation using css3 transition animation. We can set transition effect as we have required. For apply flip image code, we need to create html page and a css page first and link the css page to html page in the head section of html page as show below in the code.

Example 1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div id="div-container">
            <div id="card">
                <div class="front-img face-img">
                    <img src="image/maa-sharda-technology-img.jpg" height="200px" width="200px" />
                </div>
                <div class="back-img face-img">
                    <p>Subscribe on google pluse our blog for more updates.</p>
                    <p>like our facebook page</p>
                    <p>Follow us on twitter.</p>
                </div>
            </div>
        </div>
</body>
</html>
How to write code.
First create two div (here we create front-img & back-img class) and put these div inside the another div (we create card) than this div “card” put inside parent div (we create div-container) now write html code in both div (front-img & back-img) as show above for css 3d animation.
Now we create css style sheet.

Flip-image-css.css 
#div-container {
  position: relative;
  margin: 10px auto;
  width: 200px;
  height: 200px;
  z-index: 1;
}
#div-container {
  perspective: 1000;
}
#card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#div-container:hover #card {
  transform: rotateY(180deg);
}
.face-img {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face-img.back-img {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #F7C322;
}
As seen above in the code we set in one front image and in the other front set text but we can set in the front and back images on both sides.

NOTE:- You can set also image instead of text paragraph in the back div.

In the below code we set images at both side, and inside css in the style code we link both child div with parent div.

Example 2

Now we create flip-image.html 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="flip-image-css.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="div-container">
             <div class="flip3d">
            <div class="back">
                <img src="image/maa-sharda-technology-img.jpg" height="200px" width="200px" />
            </div>
            <div class="front">
                <img src="image/M-S-technology-img.jpg" height="200px" width="200px" />
            </div>
        </div>
        </div>
</body>
</html>
How to write code
First create two div (here we create front-div & back-div class) and put these div inside the parent div (we create flip-div). than write html code in both div as show above for css 3d animation.

Now we write css style sheet code.
Flip-image-css.css 
#div-container {
    margin: 10px auto;
    width: 200px;
    height: 200px;
}

.flip3d {
    width: 200px;
    height: 200px;
    float: left;
    margin: 10px;
    padding: 10px;
    outline: 2px solid black;
}

    .flip3d > .front {            
        position: absolute;
        transform: perspective(1000px) rotateY(0deg);
        width: 200px;
        height: 200px;
        border-radius: 7px;
        backface-visibility: hidden;
        transition: transform .5s ease-in 0s;
        outline: 2px solid rgba(0,0,100,0.7);
        border-spacing: 5px;
    }

    .flip3d > .back {
        position: absolute;
        transform: perspective(1000px) rotateY(-180deg);
        width: 200px;
        height: 200px;
        border-radius: 7px;
        backface-visibility: hidden;
        transition: transform .5s ease-in 0s;
        outline: 2px solid green;
    }

    .flip3d:hover > .front {
        transform: perspective(200px) rotateY(180deg);
    }

    .flip3d:hover > .back {
        transform: perspective(200px) rotateY(0deg);
    }

0 comments:

Post a Comment