Girar fijar una imagen en la página con CSS

En este artículo, vamos a aprender acerca de la rotación de las imágenes usando CSS ? CSS a girar en la dirección correcta y que tendrá una buena foto . No más de recortar y enderezar de otras fuentes, porque CSS hacerla misma en todos los dispositivos.

sitios web modernos no sólo contienen texto, sino también bellas imágenes de manera coherente con el texto. Incluso los blogs tienen un montón de imágenes con texto. Algunas imágenes que pueda estar utilizando pueden no ser perfectamente rectos.

Pero con CSS, convertirlos en la dirección correcta y que tendrá una buena foto. No más de recortar y enderezar de otras fuentes, porque CSS hacerla misma en todos los dispositivos. Ese es el poder de CSS.

Por lo tanto, digamos que tenemos esta imagen,

<img src='abc.jpg' class='image' />

Ahora, en CSS, tenemos que seleccionar esta imagen a través de un selector de class. En esta imagen, la imagen que tenemos como nuestro class. En CSS, vamos a nuestro estilo de imagen de la siguiente,

Código

.image {
width: 200px;
height: auto;
transform: rotate(2deg);
}

Con .Imagen se han centrado en el elemento de imagen en nuestro documento. Le damos una anchura de 200 píxeles y altura automático . Nos hemos dado altura que automático porque va a tener un class automático de la altura anchura correspondiente, de manera que la proporción de la imagen permanece siempre igual. Este es un buen cambio de tamaño de la imagen class truco, pero no proporciones.

Ahora , la transformar la imagen en la dirección de las agujas del reloj gira de propiedad en 2 grados. Cambiar el valor a negativo giraría en sentido contrario a las agujas del reloj. Los grados pueden estar en decimal, así, class orientación precisa .

La misma propiedad transform puede ser utilizado para hacer girar cualquier elemento. Considere este código :

Código

<div style="transform: rotate(10deg);">
<p>This is rotated paragraph</p>
</div>

Rotate fix an image on page with CSS - 4

Este efecto se puede extender a producir efectos agradables, cuando el usuario interactúa, como vuelo estacionario del ratón en la imagen. Echa un vistazo a la demo para ver el efecto .

DEMO

código HTML con CSS:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS center elements example</title>
<!-- CSS code below -->
<style>
body {
text-align: center;
}
.img {
width: 200px;
height: auto;
}
.rotate {
transform: rotate(-9deg);
}
.shrink {
transform: scale(0.5);
}
.effect {
transition: transform .2s;

}
.effect:hover {
transform: rotate(-9deg);
}
</style>
</head>
<body>
<h2>CSS Rotation</h2>
<h3>1. Original Image</h3>
<img src="https://ak2.picdn.net/shutterstock/videos/4028182/thumb/2.jpg?i10c=img.resize(height:160)" alt="" class="img">
<h3>2. Rotated Image</h3>
<img src="https://ak2.picdn.net/shutterstock/videos/4028182/thumb/2.jpg?i10c=img.resize(height:160)" alt="" class="img rotate">
<h3>3. Hover over image</h3>
<img src="https://ak2.picdn.net/shutterstock/videos/4028182/thumb/2.jpg?i10c=img.resize(height:160)" alt="" class="img effect">
</body>
</html>

Esperanza te gusta este truco fresco CSS. Tener pensamientos, compartir en los comentarios.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *