Cómo voltear la imagen de fondo usando CSS?
¿Cómo voltear cualquier imagen de fondo usando CSS? Es posible?
Actualmente estoy usando esta imagen de flecha en un background-image
de li
en css
On :visited
Necesito voltear esta flecha horizontalmente. Puedo hacer esto para hacer otra imagen de arrow PERO Solo tengo curiosidad por saber si es posible voltear la imagen en CSS para :visited
5 answers
Puedes voltearlo horizontalmente con CSS...
a:visited {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
JsFiddle .
Si desea voltear verticalmente en su lugar...
a:visited {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-14 10:54:12
Encontré la manera de voltear solo el fondo, no todo el elemento después de ver una pista para voltear en la respuesta de Alex. Gracias alex por su respuesta
HTML
<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>
CSS
.next a, .prev a {width:200px;background:#fff}
.next {float:left}
.prev {float:right}
.prev a:before,
.next a:before {
content:"";
width:16px;
height:16px;
margin:0 5px 0 0;
background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0; display:inline-block
}
.next a:before {
margin:0 0 0 5px;
transform:scaleX(-1);
}
Ver ejemplo aquí http://jsfiddle.net/qngrf/807/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-24 08:03:02
Según w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp
La propiedad transform es compatible con Internet Explorer 10, Firefox y Opera. Internet Explorer 9 admite una alternativa, la propiedad-ms-transform (solo transformaciones 2D). Safari y Chrome admiten una alternativa, la propiedad-webkit-transform (transformaciones 3D y 2D). Opera solo admite transformaciones 2D.
Esta es una transformación 2D, por lo que debería funcionar, con el prefijos de proveedor, en Chrome, Firefox, Opera, Safari e IE9+.
Otras respuestas usadas :antes para evitar que voltee el contenido interno. Usé esto en mi pie de página (para reflejar verticalmente la imagen de mi encabezado):
HTML:
<footer>
<p><a href="page">Footer Link</a></p>
<p>© 2014 Company</p>
</footer>
CSS:
footer {
background:url(/img/headerbg.png) repeat-x 0 0;
/* flip background vertically */
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}
/* undo the vertical flip for all child elements */
footer * {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}
Así que terminas volteando el elemento y luego volteando todos sus hijos. También funciona con elementos anidados.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-29 22:06:19
Por si sirve de algo, para los navegadores basados en Gecko no se puede condicionar esta cosa fuera de :visited
debido a las fugas de privacidad resultantes. Véase http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-24 14:04:42
Puedes voltear tanto vertical como horizontal al mismo tiempo
-moz-transform: scaleX(-1) scaleY(-1);
-o-transform: scaleX(-1) scaleY(-1);
-webkit-transform: scaleX(-1) scaleY(-1);
transform: scaleX(-1) scaleY(-1);
Y con la propiedad transition puede obtener un giro genial
-webkit-transition: transform .4s ease-out 0ms;
-moz-transition: transform .4s ease-out 0ms;
-o-transition: transform .4s ease-out 0ms;
transition: transform .4s ease-out 0ms;
transition-property: transform;
transition-duration: .4s;
transition-timing-function: ease-out;
transition-delay: 0ms;
En realidad voltea el todo elemento, no solo el background-image
SNIPPET
function flip(){
var myDiv = document.getElementById('myDiv');
if (myDiv.className == 'myFlipedDiv'){
myDiv.className = '';
}else{
myDiv.className = 'myFlipedDiv';
}
}
#myDiv{
display:inline-block;
width:200px;
height:20px;
padding:90px;
background-color:red;
text-align:center;
-webkit-transition:transform .4s ease-out 0ms;
-moz-transition:transform .4s ease-out 0ms;
-o-transition:transform .4s ease-out 0ms;
transition:transform .4s ease-out 0ms;
transition-property:transform;
transition-duration:.4s;
transition-timing-function:ease-out;
transition-delay:0ms;
}
.myFlipedDiv{
-moz-transform:scaleX(-1) scaleY(-1);
-o-transform:scaleX(-1) scaleY(-1);
-webkit-transform:scaleX(-1) scaleY(-1);
transform:scaleX(-1) scaleY(-1);
}
<div id="myDiv">Some content here</div>
<button onclick="flip()">Click to flip</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-20 00:16:36