Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- == .css ==
- .postcard {
- position: relative;
- margin: 0 auto;
- width: 400px;
- height: 270px;
- }
- .postcard-front,
- .postcard-back {
- position: absolute;
- backface-visibility: hidden;
- transition: transform 1s ease-in-out;
- }
- .postcard .postcard-back {
- transform: rotateY(180deg);
- }
- .postcard:hover .postcard-front {
- transform: rotateY(180deg);
- }
- .postcard:hover .postcard-back {
- transform: rotateY(0deg);
- }
- == .html ==
- <div class="postcard">
- <div class="postcard-back"><img height="270" width="400" src="backImage.png" alt=""></div>
- <div class="postcard-front"><img height="270" width="400" src="frontImage.png" alt=""></div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement