3D Flip Hover Effects - CSS3 Hover Effects - Pure Html CSS 3D Flipping Image - Html5 CSS3 Tutorial, source code

-





Hello Friends here you can download, view YouTube videos, preview, play, and new updates.



😎 Here is preview 
😎




😏 Here you can play😏











J Html J
<!DOCTYPE html>
<html>
<head>
        <title>3d type image book</title>
</head>
</head>
<body>
<div class="im">
        <div  class="de">
                <img src="111.jpg" width="300px" height="400px">
        </div>
        <div class="not">
<h2>Target Shivay</h2>
                <p> 
“Keep your face to the sunshine and you cannot see a shadow.” — Helen Keller.
2. “ Once you replace negative thoughts with positive ones, you'll start having positive results.” ...
3. “ Yesterday is not ours to recover, but tomorrow is ours to win or lose.”<br>
         <span>
Thanks:)|</span>

</p>
        </div>
</div>
</body>
</html>




J Css J
@font-face { 
  font-family: kruti dev ; 
  src: url( "Kruti Dev 010.ttf" ) format("truetype"); 
} 
body
{
        margin: 0;
        padding: 0;
        background: #708d00;
        font-family: FlemishScript BT;
}
.im
{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height:400px;
        background: #fff;
        transform: translate(-50%,-50%)perspective(2000px);
        box-shadow: inset 300px 0 50px rgba(0,0,0,.5),0 20px 100px rgba(0,0,0,.5);
        transition: 1s;
}
.im:hover
{
        transform: translate(-50%,-50%)perspective(2000px) rotate(-10deg);
        box-shadow: inset 20px 0 50px rgba(0,0,0,.5),0 10px 100px rgba(0,0,0,.5);
}
.im:before
{
        content: '';
        position: absolute;
        top: -5px;
        left: 0;
        width: 100%;
        height: 5px;
        background: #475b02;
        transform-origin: bottom;
        transform: skew(-45deg);
}
.im:after
{
        content: '';
        position: absolute;
        top: 0;
        right: -5px;
        width: 5px;
        height: 100%;
        background: #7ea301;
        transform-origin: left;
        transform: skewY(-45deg);
}
.im .de
{
        width: 300px;
        height: 400px;
        position: relative;
        transform-origin: left;
        z-index: 1;
        transition: 1s;
}
.im:hover .de
{
        transform: rotateY(-135deg);
}
.im .not
{
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        padding: 20px;
        z-index: -1;
}
h2
{
        text-align: center;
        text-decoration: underline;
        color: #f00;
}
p
{
        font-weight: bold;
        color: #000;
        text-align: justify;
}
p:hover
{
        color: ;
}
span
{
        color: green;
        text-align: right;
}



J YouTube J


Comments

Post a Comment

Target Shivay