html - Background change effect by rotation on hover via CSS3 -
i web developer. client's website need put effect on hover specific div shown in website . when hover on div background should change rotating. how can this. can ease effect background change using css3 transition. there way same without using jquery ?
see scrrenshot 
i simulate provide animation without jquery. key achieve use parent & chidl relation , understand key point when animation play.
.hover{ position: relative; width: 200px; height: 200px; background-color: #1cf; } .background{ position: absolute; width: 100%; height: 100%; color: #fff; text-align: center; line-height:10; background-color: #c33; transition: 0.3s; z-index: 2; font-size: 20px; } .content{ position: absolute; width: 100%; height: 100%; background-color: #fff; text-align: center; font-size: 20px; opacity: 0; line-height: 10; transform: scale(-1,1); transition: 0.3s; } .hover:hover .background{ transform: scale(-1,1); opacity: 0; } .hover:hover .content{ transform: scale(1,1); opacity: 1; }<!doctype html> <html> <head> <meta charset="utf-8"> <title>js bin</title> </head> <body> <div class="hover"> <div class="background"> background!!! </div> <div class="content"> content! </div> </div> </body> </html>