Iphone 6 css3 减半尺寸

Question

我发现这真的很酷 css3 Iphone。然而，它太大了。我想要它的大小是现在的一半。甚至四分之一。

但我真的很难改变它。我知道我可以使用 !important 标签调整高度。但随后它弄乱了所有尺寸，例如按钮。

实现此目标的最佳方法是什么？可以改成%这样的相对参数吗？我该怎么做。

HTML :

<div class="row" style="vertical-align: middle;text-align: center; margin-top: -150px;">
    <div class="marvel-device iphone6 silver"  >
        <div class="top-bar"></div>
        <div class="sleep"></div>
        <div class="volume"></div>
        <div class="camera"></div>
        <div class="sensor"></div>
        <div class="speaker"></div>
        <div class="screen">
            <h1>0483/519.007</h1>
        </div>
        <div class="home"></div>
        <div class="bottom-bar"></div>
    </div>
</div>

CSS :

.iphone6 {
    -webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);
    width: 375px;
    height: 667px;
    padding: 105px;
    background: #d9dbdc;
    -webkit-border-radius: 56px;
    border-radius: 56px;
    -webkit-box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
    box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
}

.iphone6 h1 {
    color: black;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);    
    position: absolute;    
    left: 20%;    
    top: 48%;
    width: 100%;
}

外部库 & Fiddle:

Answer 1

只需使用 transform: scale(0.5) 并将其添加到旋转之前的变换中

Iphone 6 css3 减半尺寸

Iphone 6 css3 make it half size

html

css

frontend