Iphone 6 css3 уменьшить вдвое

#html #css #frontend

#HTML #css #интерфейс

Вопрос:

Я нашел этот действительно классный Iphone css3. Однако он слишком большой. Я бы хотел, чтобы он был вдвое меньше, чем сейчас. Или даже на четверть.

Но мне действительно сложно это изменить. Я знаю, что могу отрегулировать высоту с помощью тега !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%;
}

Внешняя библиотека и скрипта:

Ответ №1:

Просто используйте transform: scale (0.5) и добавьте его к преобразованиям перед поворотом