Positioning images on top of other - css

Question

we are developing an cordova Ionic application. For front end we are using html css.
I want to position images to make http://s6.postimg.org/3jnxu7sr5/Home.png
I am done with http://s6.postimg.org/92qhbfpsh/homw_Screen.png
But the remaining i am not able to bring the top image over the center button to achieve the target. I have uploaded my code here https://jsfiddle.net/sweety1112/p36jxhcd/3/embedded/result/ but fiddle has changed much of UI.
If some one could help that would be of much greatful.
<div class="container">
<div class="top">
<h2 class="mid">Scan</h2>
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'>
</div>
<div class="row">
<img class="applyRotationLeft" src='http://s6.postimg.org/cnhaxjo0h/alphaeon_home_history.png'>
<img class="centerButton" src='http://s6.postimg.org/szrcna2c1/start_btn.png'>
<img class="applyRotationRight" src='http://s6.postimg.org/3orp3w029/home_config.png'>
</div>
<div class="bottom">
<img src='http://s6.postimg.org/6gayuhykx/home_history.png'>
</div>
Regards,
Shraddha

Answer 1

Well if you're going to be rotating the images, there's no need to have five seperate images, it's just more requests and more data usage, since you really need only two images.
If you use
transform-origin: x% x%;
and set it right at the center of the center button somehow, you only need to rotate each of the red things in increments of 90 degrees. I was able to do just that.
HTML:
<div class="container">
<div class="centerButton">
<img src='http://s6.postimg.org/szrcna2c1/start_btn.png'/>
<p>Text</p>
</div>
<div class="top rotate">
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'/>
<div>
<p>Text</p>
</div>
</div>
<div class="left rotate">
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'/>
<div>
<p>Text</p>
</div>
</div>
<div class="right rotate">
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'/>
<div>
<p>Text</p>
</div>
</div>
<div class="bottom rotate">
<img src='http://s6.postimg.org/wnc5qggup/home_scan.png'/>
<div>
<p>Text</p>
</div>
</div>
</div>
and the CSS:
.rotate div{
position: absolute;
padding:0;
margin:0;
width:100%;
height:100%;
left:0;
right:0;
top:0;
bottom:0;
transition: transform 0.5s linear;
}
.centerButton img, .centerButton p{
position:absolute;
width:100%;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
margin:auto;
}
.centerButton p{
height:10%;
text-align:center;
}
.centerButton{
width:50%;
height:50%;
margin:auto;
position:absolute;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
}
.rotate img{
width:100%;
position:relative;
}
.rotate{
transition: transform 0.5s linear;
position:absolute;
width:72%;
-webkit-transform-origin: 70% 105%;
transform-origin: 70% 105%;
}
.container .bottom, .bottom p{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.container .left, .right div p{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.container .right, .left div p{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.container{
width:250px;
height:250px;
display:block;
position:relative;
}
.rotate div p{
position:absolute;
margin:0;
padding:0;
}
.rotate div p{
top:20%;
left:20%;
}
Here's the fiddle and another I think is a little bit cooler.
NOTE: I only used -webkit- prefix in my fiddle, so you may need to change that in your browser
EDIT: Edited to add what OP asked for in comments

Answer 2

Place the entire image inside one div container. Give each of the five pieces their own id="". Use # to call each id in your css file, put position:relative in all five and use top right bottom & left with px values to maneuver all the pieces into place.