Flip CSS Animation with Logo

Developer
Hélio Marcondes
Size
1,797 Kb
Views
22,264
  1. Flip CSS Animation with Logo Previews
  2. Flip CSS Animation with Logo HTML Codes
  3. Flip CSS Animation with Logo CSS Codes

How do I make an flip css animation with logo?

CSS animation Inspired by http://www.maujor.com/tutorial/criando-animacao-flipping-com-css.php. What is a flip css animation with logo? How do you make a flip css animation with logo? This script and codes were developed by Hélio Marcondes on 22 October 2022, Saturday.

Flip CSS Animation with Logo Previews
IQ Test

Flip CSS Animation with Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flip CSS Animation with Logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flip-container"> <div class="flipper"> <div class="front"></div> <div class="back"></div> </div>
</div>
</body>
</html>

Flip CSS Animation with Logo - Script Codes CSS Codes

.flip-container{ perspective:1000;
}
.flip-container:hover .flipper { transform: rotateY(180deg);
}
/*speed of transition*/
.flipper{ transition: 1s; transform-style: preserve-3d; position: relative;
}
.flip-container, .front, .back { width: 200px; height: 200px; border-radius:50%;
}
.front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0;
}
.front { background: url('http://i229.photobucket.com/albums/ee6/dauz4689/firefox-logo-200x200.png') no-repeat center; z-index: 2;
}
.back { background: url('http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png') no-repeat center; transform: rotateY(180deg);
}
Flip CSS Animation with Logo - Script Codes
Flip CSS Animation with Logo - Script Codes
Home Page Home
Developer Hélio Marcondes
Username haykou
Uploaded October 22, 2022
Rating 3
Size 1,797 Kb
Views 22,264
Do you need developer help for Flip CSS Animation with Logo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hélio Marcondes (haykou) Script Codes
Name
Speedometer, Velocimeter
Simple clock with AngularJS
Simple way for icons inside input
Pure AngularJS Tabs
Search button expanding input submit
Simple Form with Icons
Custom scrollbar crossbrowser
Side Menu using AngularJS
Sticky Header using Jquery
Bootstrap Menu with Effect
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!