Ho trovato questo Iphone css3 davvero interessante. Comunque è molto grande, mi piacerebbe averlo metà delle dimensioni che è ora o anche solo una quarta.
Ma sto avendo davvero dei problemi a cambiarlo, so che posso regolare l'altezza con il tag! Important, ma poi rovina tutte le dimensioni come il pulsante.
Qual è il modo migliore per raggiungere questo obiettivo? Può essere modificato con parametri relativi come%? E come faccio a farlo.
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%;
}
Lib & fiddle esterno:
risposte:
1 per risposta № 1Basta usare transform: scale (0.5) e aggiungerlo alle trasformazioni prima di ruotare