0

Tengo esta figura

div{
width:100px;
height:100px;
background:red;
border-radius: 50px 50px 0 0;
}
<html>
  <body>
    <div>
    </div>
  </body>
</html>

La quiero invertir y trasladar respetando el espacio, ya lo hice con el siguiente código, pero quería saber si hay alguna propiedad para hacerlo más fácil y rápido(asi sea con una propiedad en 3D

div{
    width:100px;
    height:100px;
    background:red;
    border-radius: 50px 50px 0 0;
    transform-origin:bottom;
    transform:rotate(180deg);
    }
<html>
      <body>
        <div>
        </div>
      </body>
    </html>

3
  • Podes usar transform: rotate3d, pero cual es el problema con tu implementacion? si funciona perfecto tal y como lo haces Commented el 16 nov. 2023 a las 23:47
  • Hola, Juan. ¿A qué te refieres con más "fácil y rápido"? Si con lo que ya tienes lo es. ¿O estás buscando si existe una única propiedad que haga todo lo que puedes hacer con dos o más propiedades para dar ese efecto de "volteo/espejo"? Porque todas las formas que se me ocurren involucran al menos a transform-origin: bottom; ¿O estás buscando otras alternativas a parte de transform: rotate();?
    – Chandew
    Commented el 17 nov. 2023 a las 1:10
  • Pense que habia una propiedad en 3d que me hiciera lo mismo que las 2 propiedades que intente, pero ya veo que no, gracias Commented el 17 nov. 2023 a las 17:06

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.