Question

我们正在开发一种cordova Ionic应用程序。对于前端，我们使用的是html css。我想定位图像以制作http://s6.postimg.org/3jnxu7sr5/Home.png 我完成了http://s6.postimg.org/92qhbfpsh/homw_Screen.png 但剩下的我无法将顶部图像放在中心按钮上以实现目标。我在这里上传了我的代码https://jsfiddle.net/sweety1112/p36jxhcd/3/embedded/result/但是小提琴已经改变了很多UI。

如果有人可以提供帮助，那就太好了。

<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>

此致 Shraddha

Answer 1

好吧，如果你要旋转图像，就不需要有五个单独的图像，只需要更多的请求和更多的数据使用，因为你真的只需要两个图像。如果你使用

transform-origin: x% x%;

并以某种方式将其设置在中心按钮的中心，你只需要以90度的增量旋转每个红色的东西。我能做到这一点。

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>

和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%;
}

这是fiddle和another我觉得有点凉。

注意：我的小提琴中只使用了-webkit-前缀，因此您可能需要在浏览器中更改

编辑：编辑添加OP在评论中要求的内容

Answer 2

将整个图像放在一个div容器中。给这五个部分中的每个部分自己id=""。使用#来调用css文件中的每个ID，将position:relative放入所有五个ID并使用top right bottom＆amp;具有px值的left可以将所有部分调整到位。

将图像定位在其他图像之上

2 个答案: