彼らは自分の軸の上で回転なっているので、あなたのボタンはすべて別々のオブジェクトであります彼らのマージンなどを回転させる。 開始するには、すべてのボタンをdivに入れることができます。ここから
<div class="button-box">
<button id="blue" class="button"></button>
<button id="red" class="button"></button>
<button id="yellow" class="button"></button>
<button id="green" class="button"></button>
</div>
、あなたのボタン上のすべての余白を削除し、代わりに山車を入力します。
#red {
width: 100px;
height: 100px;
background: red;
border: none;
display: block;
}
#blue {
width: 100px;
height: 100px;
background: blue;
border: none;
float:left;
}
#yellow {
width: 100px;
height: 100px;
background: yellow;
border: none;
clear:both;
float:left;
}
#green {
width: 100px;
height: 100px;
background: green;
border: none;
display: block;
float:left;
}
を今、すべてのオブジェクトがグループに属していることを、あなたはグループを単に回転させることができます。私はabsolute
の位置をウィンドウの中央に配置するように追加しました。
.button-box{
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: 0 auto;
display: block;
position: absolute;
left: 50%;
margin-left: -140px;
}
Here is a jsfiddle as well
以下のようにdiv要素を丸暗記!それは窓のロゴです! – HelpingHand
箱に入れて箱/容器を回転させてください – ntgCleaner
このような簡単な解決策は、ありがとうございます! – Danyx