0
193
ViewsOverlapping rotated images in javascript
I am trying to get the arrows to start at the exact same point and vary the rotations of the arrows. Below is an example of my code in HTML/JS/CSS and a picture of what i am running into. Any ideas as to how to make the pictures of these arrows overlap better at the origin?
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;
}
Any pointers appreciated many thanks!!
·
Juan Pablo Isaza
1 answers
Answer question0
I think your issue is because the container size & then the transform-origin is at 0%, where as 50% from the top would work better.
.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
Report
Answer question