0
191
VistasSuperposición de imágenes rotadas en javascript
Estoy tratando de hacer que las flechas comiencen exactamente en el mismo punto y varíen las rotaciones de las flechas. A continuación se muestra un ejemplo de mi código en HTML/JS/CSS y una imagen de lo que me encuentro. ¿Alguna idea sobre cómo hacer que las imágenes de estas flechas se superpongan mejor en el origen?
HTML/JS
content.innerHTML= '<div id = "contain"><img class = "arrow" style="transform: rotate(90deg)" src="img/arrow_0]+'.png"</img><img class = "arrow" style="transform: rotate(60deg)" src="img/arrow_1.png"</img><img class = "arrow" style="transform: rotate(75deg)" src="img/arrow.png"</img></div>'CSS:
#contain { position: relative; width: 104%; height: 132%; } #contain img { position: absolute; top: 0; left: 0; } .arrow { transform-origin: 0% 0%; max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; position:absolute; } 
Cualquier sugerencia apreciada muchas gracias!!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Creo que su problema se debe a que el tamaño del contenedor y luego el origen de transformación está en 0%, mientras que el 50% desde la parte superior funcionaría mejor.
.arrow { width: 200px; height: 10px; position: absolute; left: 200px; top: 200px; transform-origin: 100% 50%; } #contain-1 .arrow { background-color: red; transform: rotate(90deg); } #contain-2 .arrow { background-color: green; transform: rotate(45deg); } #contain-3 .arrow { background-color: blue } <div id="contain-1"> <div class="arrow"></div> </div> <div id="contain-2"> <div class="arrow"></div> </div> <div id="contain-3"> <div class="arrow"></div> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta