我有4個按鈕，每個都旋轉45°，並且想要實現類似於圖片的操作，我嘗試應用左側邊距和/或按鈕，但由於元素已旋轉，邊距也會隨着旋轉它和轉換起源似乎並不適合我（或者我沒有正確使用它）。移動旋轉的CSS元素
Here是我目前的代碼codepen這裏是對應於黃色按鈕的代碼片段：
#yellow {
width: 100px;
height: 100px;
background: yellow;
border: none;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
你的按鍵都是獨立的對象，使他們越來越對自己的軸的旋轉並因此旋轉他們的利潤等。 所以要開始，你可以把你所有的按鈕放在一個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;
}
嘗試封閉所有的人一個div內和死記硬背的div像下面
var simon = [];
var answer = [];
var listening = false;
var strict = false;
var color = ["red", "blue", "yellow", "green"];
var colors = {
red: new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"),
blue: new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"),
yellow: new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"),
green: new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3")
};
$("#start").click(function(){
start();
});
$(".button").click(function(){
if(listening === true){
var choice = $(this).attr('id');
colors[choice].play();
answer.push(choice);
if(answer.length === simon.length){
if(checkAnswer())
if(simon.length === 20){
$("#state").text("VICTORY");
listening = false;
setTimeout(function() {
start();
}, 1500);
}
else{
$("#state").text("CORRECT!");
setTimeout(function() {
pick();
$("#state").html(' ');
}, 1000);
}
else{
$("#state").text("WRONG");
if(strict){
setTimeout(function() {
start();
}, 1000);
} else {
setTimeout(function() {
answer = [];
playSimon();
$("#state").html(' ');
}, 1000);
}
}
}
}
});
$("#strict").click(function(){
strict = !strict;
if(strict)
$("#strictStatus").text("ON");
else
$("#strictStatus").text("OFF");
});
function start(){
$("#start").text("RESET");
simon = [];
pick();
}
function pick(){
$("#start").text("RESET");
var pick = color[Math.floor(Math.random() * 4)];
answer = [];
simon.push(pick);
playSimon();
$("#turns").text(simon.length);
listening = true;
}
function playSimon(){
var i = 0;
listening = false;
var interval = setInterval(function(){
if(i >= simon.length){
clearInterval(interval);
} else {
$("#" + simon[i]).addClass("active");
colors[simon[i]].play();
setTimeout(function() {
$("#" + simon[i]).removeClass("active");
console.log(simon);
i++;
}, 450);
}
}, 700);
listening = true;
}
function checkAnswer(){
for(var i = 0; i < simon.length; i++)
if(simon[i] !== answer[i])
return false;
return true;
}body{
font-family: 'Press Start 2P', cursive;
width: 100%;
margin: 0;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
#game{
margin: 0 auto;
}
.crosscontainer{
width:80%;
margin:80px auto;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.button{
float:left;
width: 100px;
height: 100px;
border: none;
}
#red {
background: red;
}
#red.active{
background: darkred;
}
#red:active{
background: darkred;
}
#blue {
background: blue;
}
#blue.active{
background: darkblue;
}
#blue:active{
background: darkblue;
}
#yellow {
background: yellow;
clear: left;
}
#yellow.active{
background: darkgoldenrod;
}
#yellow:active{
background: darkgoldenrod;
}
#green {
background: green;
}
#green.active{
background: darkgreen;
}
#green:active{
background: darkgreen;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="game">
<h2>NUMBER OF TURNS: <span id="turns">0</span></h2>
<h2 id="state"> </h2>
<h4>Strict mode: <span id="strictStatus">OFF</span></h4>
<button id="start">START</button>
<label class="switch">
<input type="checkbox" id="strict">
<div class="slider round"></div>
</label>
<div class="crosscontainer">
<button id="red" class="button"></button>
<button id="blue" class="button"></button>
<button id="yellow" class="button"></button>
<button id="green" class="button"></button>
</div>
</div>
</body>
嘿！這是Windows徽標！ – HelpingHand
把它們放在一個盒子裏，然後旋轉盒子/容器 – ntgCleaner
這樣一個簡單的解決方案，謝謝！ – Danyx