user3806549 user3806549 - 1 month ago 15
CSS Question

Iphone 6 css3 make it half size

I found this really cool css3 Iphone. However it's way to big. I would like to have it half the size it is now. Or even one forth.

But I'm having a really hard time changing it. I know I can adjust the height with the !important tag. But then it messes up all the dimensions such as the button.

What is the best way to achieve this? Can it be changed to relative params like %? And how do I do that.

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


External lib & Fiddle:


Answer

Just use transform: scale(0.5) and add it to the transforms before rotate/