How to flip an image with CSS?

Question

I have a problem with CSS. I tried to rotate an image with CSS so that it was left aside, it worked in Firefox but not in Safari.

Follow the code used to rotate the image:

.body-element-p1{
    top: 11%;
    left: 41%;
    position: absolute;
    z-index: 10;
    transform: rotate(180deg);
}

If you have any tips I accept.

Answer 1

TL;DR

Add the prefix -webkit-.

.body-element-p1{
    top: 11%;
    left: 41%;
    position: absolute;
    z-index: 10;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);

    transform: rotate(180deg);
}

Complement

These prefixes were added to the properties so that the developers could try them out, since - in theory - there should be no visual change.

Developers should wait to include the default property until browser behavior is standardized.¹

According to Mozilla website:

The browser manufacturers are working to stop using supplier prefixes for experimental resources. Web developers have been using them on production sites despite their experimental nature. This made it harder for browser providers to ensure compatibility and work with new features; it was also detrimental to smaller browsers who were forced to add prefixes from other browsers to upload popular websites.

Which order to use?

In the question Sort styles with prefixes in CSS ( @dvd), there is no explanation as to why you should use a certain order, but this happens because browsers read these properties in the order you place. But this is relative (as shown below).

It happens because browsers use these prefixes for (as was said earlier) experimental things and so they process this information differently. Therefore, you must check how best to use it. Examples:

Right Way:

#rightway { background: #ccc; padding: 30px;
  /* Navegador vai tentar aplica-lo */
  -webkit-border-radius: 30px 10px;

  /* Porém não vai conseguir, pois essa propriedade irá substituir a anterior. */
  border-radius: 30px 10px;
}

Correct Mode ²:

#wrongway { background: #ccc; padding: 30px; 
  border-radius: 30px 10px;
  -webkit-border-radius: 30px 10px 30px 10px;
}

In the correct modes the browser will interpret the last property as follows:

border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 10px;

Wrong Mode:

#wrongway { background: #ccc; padding: 30px; 
  border-radius: 30px 10px;
  -webkit-border-radius: 30px 10px;
}

In this mode, the browser will override the "real property" border-radius, by the prefixed property, however, the browser interpretation will be an elliptical border. Ex:

border-top-left-radius: 30px 10px;
border-top-right-radius: 30px 10px;
border-bottom-right-radius: 30px 10px;
border-bottom-left-radius: 30px 10px;