¿Para qué? No importa pero, hagamos girar las cosas con CSS en cualquier navegador.
Creamos una clase a la que llamamos flipH y vamos a invertilra horizontalmente cuando colocamos el cursor encima:
Creamos una clase a la que llamamos flipH y vamos a invertilra horizontalmente cuando colocamos el cursor encima:
.flipH { /* cualquier propiedad */ }
.flipH:hover {
-moz-transform: scaleX(-1); /* Firefox */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Chrome y Safari */
transform: scaleX(-1); /* w3org */
filter: FlipH; /* Internet Explorer */
}Con una imagen es sencillo:
<img class="flipH" src="URL_imagen" />
También podemos hacerlo con el contenido de cualquier otra etiqueta de bloque como un DIV:
<div class="flipH"> abcdefghijk </div>
abcdefghijk
De manera similar, podemos hacer girar las cosas verticalmente:
.flipV { /* cualquier propiedad */ }
.flipV:hover {
-moz-transform: scaleY(-1); /* Firefox */
-o-transform: scaleY(-1); /* Opera */
-webkit-transform: scaleY(-1); /* Chrome y Safari */
transform: scaleY(-1); /* w3org */
filter: FlipV; /* Internet Explorer */
}
</style>
REFERENCIAS:1stwebdesigner.com
18 comentarios:
Excelente función aunque sinceramente no se me ocurre nada para lo que pueda usarlo, espero ideas :D
Me encantan todo lo que se consigue con CSS, había también una entrada tuya que lo explicaba con un script algo así como escoger los grados que se quería invertir o algo así, una maravilla :)
D2U2:
Pues es una manera muy interesante para reeplazar esas imagenes que muestran cando algo está expandido o contraido, por ejemplo.
Gem@ :
Claro, eso no se me ocurrió pero, es verdad, podría usarse algo similar para hacerlas girar en cualqueir dirección, incluso en IE. Creo que la entradas era esta.
No se me ocurre nada lógico, el efecto es precioso...algo ilógico: que las calles tengan flechas así, el abecedario en la escuela ;)
El texto en IE7 a mi no me gira.
Las imágenes si.
Ya me parecía que no todo resultaría bien en IE.
La verdad ese truco me sirve para un proyecto en el que estoy trabajando, cuando lo tenga lo muestro; Jmiur una pregunta mas como se ordena lo elemntos del blog?, como ejemplo tu blog los elementos de la parte derecha.
Muchas gracias por todas tus respuestas.
Hola Gema, se que esta Entrada no tiene algo que ver con mi consulta, pero sabras algun modo con el que pueda darle a los enlaces de una Entrada en blogger un fondo, como podemos darselo a los textos de un parrafo en el programa word. Puedes ver un ejemplo en este poput http://www.userplane.com/directory/index.cfm?action=domain.viewTOS
Y si es posible, podra hacerse tambien ese efecto de fondo a el titulo de la entrada?.
Muchas gracias
Hola, perdon me habia equivocado en el anterior comentario, el blog de Gema es otro me habia confundido. se que esta Entrada no tiene algo que ver con mi consulta, pero sabras algun modo con el que pueda darle a los enlaces de una Entrada en blogger un fondo, como podemos darselo a los textos de un parrafo en el programa word. Puedes ver un ejemplo en este poput http://www.userplane.com/directory/index.cfm?action=domain.viewTOS
Y si es posible, podra hacerse tambien ese efecto de fondo a el titulo de la entrada?.
Muchas gracias
Vku:
No veo problemas en IE7 Funcionará en versiones inferiors aún, desde IE 5 en adelante pero, sería mejor que actualizaras el navegador.
Genio en Potencia:
Los puedes mover desde la primera pantalla de diseño; arrastras cada gadget hasta ubicarlo en al posición que quieras.
Yhonny:
Del mismo modo que se le pone a fondo a cualquier otro elemento; en general, en los enlaces sería:
.post-body a:hover {background-color:#color;}
pra los títulos de los posts es lo mismo:
.post-title a:hover {background-color:#color;}
aunque en ambos casos, hay que ver si la plantilla tiene esas clases que son als que usa Blogger por defecto.
Y si es posible, podra hacerse tambien ese efecto de fondo a el titulo de la entrada?.
Muchas gracias
Es raro, ayer no me giraba el texto, hoy si.
Lo que me sale es un error al entrar al blog "throw a"
Imagen IE7 - Imagen IE8
No sé. Ayer habrá estado de vacaciones, lo desconozco :D
Esos errore sque muestras son de Blogger, de su script widgets.js y no sólo se producen en IE sino en todos los navegadores aunque no los muestren: uncaught exception: did not find element for id blogs ... no sé qué significan.
Hola, esto me ha quedado como anillo al dedo, pero me ha surgido un problema, es lo siguiente mira, tengo mi seccion normal
#sidebard{
width: 260px;
background:url(http://imgur.com/buVpN.png) repeat-y;
-moz-transform: scaleX(-1); // Firefox
-o-transform: scaleX(-1); // Opera
-webkit-transform: scaleX(-1); // Chrome y Safari
transform: scaleX(-1); // w3org
filter: FlipH; // Internet Explorer
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
pero quiero que la inversion (asi se dice no?) de la imagen solo me afecte al background, no es un hover si no todo el tiempo, crees que podria ser posible?
Gabriel:
No estoy muy seguro de entender la idea. Imagino que en esa sección, tienes otros elementos agregados y que, al poner la propeidad, todos se invierten cuando en realidad, sólo quieres que se invierta la imagen de fondo y no el resto.
Si es así, es mucho más sencillo que crees una segunda imagen invertida y la uses en lugar de esa que tienes.
@JMiurEso he hecho, pero la idea usar la misma imagen para que el blog cargara un poco mas rapido, pero aun asi muchas gracias, logre hacerlo con otras dos, que vamos dos imagenes mas rapido son dos imagenes mas rapido :)
Depende de las imágenes que uses. Si no es ese método, deberás usar CSS, crear Divs extras para contener la imagen, colocarles propiedades, etc.
Cualquier cosa que se agregue, hasta un simple caracter, implica un increento en la carga así que, simplemente debe evaluarse cuál es la mejor solución en cada caso particular porque a veces, el remedio es peor que la enfermedad :-)
Muchas gracias... yo si que le he encontrado utilidad. Necesitaba hacer un vmirror y hmirror mediante html a una captura de una cámara IP que no lo hacía por hardware... y bingo!! con esto funciona.
Esta funcion me serviría para hacer que el fondo de la web se repitiera y que las imagenes al repetirse se viesen invertidas. Así si el fondo es un degradado de colores pues cuando acaba el fondo no se ve un corte, si no se continua haciendo el degradado hacia abajo invertido.
He hecho pruebas y no consigo que me haga eso...
Dependerá del ejemplo concreto:
http://nicolasgallagher.com/css-background-image-hacks/demo/transform.html
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...