Bienvenido a nuestra comunidad, aquí vas a hallar la solucíon que buscabas.
Ejemplo 1: CSS rotar
<style>divwidth:80px;height:80px;background-color:skyblue;.rotatedtransform:rotate(45deg);background-color:pink;style>
/* In body of html doc */
<div>Normaldiv><divclass="rotated">Rotateddiv>Ejemplo 2: rotar elemento css
div
width: 80px;
height: 80px;
background-color: skyblue;
.rotated
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
background-color: pink;
Ejemplo 3: transformación CSS
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate(120px, 50%);
transform: scale(2, 0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: scale(0.5) translate(-100%, -100%);
transform: perspective(17px);Ejemplo 4: transform rotate css
DOCTYPEhtml><html><head><style>div.awidth:150px;height:80px;background-color:yellow;-ms-transform:rotate(20deg);/* IE 9 */transform:rotate(20deg);div.bwidth:150px;height:80px;background-color:yellow;-ms-transform:skewY(20deg);/* IE 9 */transform:skewY(20deg);div.cwidth:150px;height:80px;background-color:yellow;-ms-transform:scaleY(1.5);/* IE 9 */transform:scaleY(1.5);style>head><body><h1>The transform Propertyh1><h2>transform: rotate(20deg):h2><divclass="a">Hello World!div><br><h2>transform: skewY(20deg):h2><divclass="b">Hello World!div><br><h2>transform: scaleY(1.5):h2><divclass="c">Hello World!div>body>html>Ejemplo 5: como rotar una imagen en CSS
div
position: absolute;
left: 40px;
top: 40px;
width: 100px;
height: 100px;
background-color: lightgray;
.rotate
background-color: transparent;
outline: 2px dashed;
transform: rotate(45deg);
.rotate-translate
background-color: pink;
transform: rotate(45deg) translateX(180px);
.translate-rotate
background-color: gold;
transform: translateX(180px) rotate(45deg);
Valoraciones y reseñas
Nos encantaría que puedieras dar recomendación a esta noticia si te ayudó.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)