prevent children from inheriting transformation css3

by

Here is it what worked for me..

I used opposite transition for children. Then it was stable

.logo {
    background: url('../images/logo-background.png') no-repeat;
    width: 126px;
    height: 127px;
    margin-top:-24px;
    z-index: 10;
    display: block;

}
a.logo span{
    display: block;
    width: 126px;
    height: 127px;
    background: url('../images/logo-bismi.png') no-repeat;
    z-index: 20;
    text-indent: -9999px;
    text-transform: capitalize;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;    

}
a.logo:hover span{
    -webkit-transform: rotateZ(-360deg);
    -moz-transform: rotateZ(-360deg);
    transform: rotateZ(-360deg);
}
a.logo {
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;        
}
a.logo:hover{
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    transform: rotateZ(360deg); 
}

More Related Contents:

  1. What is the difference between display: inline and display: inline-block?
  2. CSS Floating Divs At Variable Heights [duplicate]
  3. CSS selector based on element text? [duplicate]
  4. CSS @font-face not working with Firefox, but working with Chrome and IE
  5. Opacity of background-color, but not the text [duplicate]
  6. Formatting numbers (decimal places, thousands separators, localization, etc) with CSS
  7. Sass Variable in CSS calc() function
  8. How to increase the gap between text and underlining in CSS
  9. Bootstrap with different order on mobile version
  10. Downloading a Google font and setting up an offline site that uses it
  11. How to style a div to be a responsive square? [duplicate]
  12. 3D CSS transform, jagged edges in Firefox
  13. Change the order of col-*-12 columns in Bootstrap using push/pull
  14. Expand div from the middle instead of just top and left using CSS
  15. How to make a element expand or contract to its parent container?
  16. Defining Variable Variables using LESS CSS
  17. Webpack “OTS parsing error” loading fonts
  18. How can I zoom an HTML element in Firefox and Opera?
  19. difference between body and * in css
  20. Binding in Control with “class” Attribute
  21. Chrome renders colours differently from Safari and Firefox
  22. How to remove outline border from input button
  23. Angular 2: How to style host element of the component?
  24. Bootstrap: Position of dropdown menu relative to navbar item
  25. iPhone X / 8 / 8 Plus CSS media queries
  26. How do you debug printable CSS?
  27. CSS3 3D Transform doesn’t work on IE11
  28. IE not rendering CSS properly when the site is located at networkdrive
  29. What CSS selector can be used to select the first div within another div
  30. CSS: How to change colour of active navigation page menu

Leave a Comment