How to flip an image with CSS?

Question

How to flip an image with CSS?

Navigation

#1 by (1 votes)

0

I have a problem with CSS. I tried rotating an image with CSS so it would stay on the side, it worked in Firefox but not Safari.

Here is 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 am accepting.

css3

asked by anonymous 13.02.2018 / 01:21

1 answer

How to have 'apt remove' response via shell_exec with PHP or Python? Webpack + sass generating style.css

score 1 · Answer 1

TL; DR

Add the -webkit- prefix.

.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 developers could try them out, since - in theory - there should be no visual change.

Developers should expect to include the non-default property until browser behavior is standardized.

According to the Mozilla website:

Browser manufacturers are working to stop using vendor prefixes for experimental features. Web developers have been using them on production sites, despite their experimental nature. This made it more difficult for browser providers to ensure compatibility and work with new features; has also been detrimental to smaller browsers that end up forced to add prefixes from other browsers to load popular websites.

Which order to use?

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

It happens because browsers use these prefixes to (as we've said before) experimental things and so they process this information differently. So you should check how best to use it. Examples:

Correct Mode:

#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 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;

Incorrect Mode:

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

In this mode, the browser will replace the "real" property border-radius , with the property prefixed, 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;