CODEWITHSUNDEEP
css
Vikash Anand
Vikash Anand

Reputation: 67

transition:rotate is not working in Firefox

This is my code and transform is working in chrome browser but in firefox it is not working.

.delete-white a:before {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 15px;
    left: 6px;
    margin-top: -7px;
    width: 5px;
    -webkit-transform: rotate(45deg) scale(1); 
    -moz-transform: rotate(45deg) scale(1); 
    -o-transform: rotate(45deg) scale(1); 
    -ms-transform: rotate(45deg) scale(1); 
}
.delete-white a:after {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 5px;
    left: 1px;
    margin-top: -2px;
    width: 15px;
    -webkit-transform: rotate(45deg) scale(1); 
    -moz-transform: rotate(45deg) scale(1); 
    -o-transform: rotate(45deg) scale(1); 
    -ms-transform: rotate(45deg) scale(1); 
}

Upvotes: 1

Views: 4051

Answers (3)

CafiCChiO
CafiCChiO

Reputation: 39

Add this rule to element: "display: inline-block;"

Upvotes: 3

Derek Peterson
Derek Peterson

Reputation: 603

You need to include the standard, non-prefixed version (i.e. transform: rotate(45deg) scale(1);) as the final definition in your list of transforms. The -moz one is deprecated, as will/should be the other ones in time. See the MDN for reference.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Two notes

  1. You need to have content to :before/:after pseudo elements
  2. You have forgotten the unprefixed version: transform: rotate(45deg) scale(1);

Upvotes: 3

Related Questions