Example of Flip hover effect




     

.
Helloo guys,Thank you For Visit my Blog  Share and Subscribe My blog. 

My presonal Site visit  Jeel Bhatti




Download code Click Here:-- Download
.
Code:------>


<!DOCTYPE html>

<html>

<head>

<title>rotate hover effect</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

body{

background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(102,116,236,1) 0%, rgba(50,231,219,1) 90% );

}

.but{

line-height: 100px;

width: 300px;

font-size: 30px;

margin:100px 45%;

border-right: 3px solid red;

border-top: 2px solid blue;

border-left: 3px solid green;

border-bottom: 2px solid yellow;

transition: all 0.5s ease-in-out;

transform: scale(1);

border-radius: 8px;

transform:  rotateY(0deg) scale(1);

overflow: hidden;

}

.but:hover{

transform:  rotateZ(360deg) scale(1.3);

box-shadow:0 0  50px 20px  rgba(181,64,149,1);

//background: radial-gradient( circle farthest-corner at 10% 20%,  rgba(233,122,129,1) 0%, rgba(181,64,149,1) 100.2% );

}

</style>

</head>

<body>

<img src="1.jpg" class="but">

</body>

</html>