移动旋转的CSS元素

Question

我有4个按钮，每个旋转45°，并希望实现类似于图片的东西，我尝试过应用左边距和/或按钮，但是由于元素旋转，边距也随之旋转并变换 - 来源似乎对我不起作用（或者我没有正确使用它）。

Here是使用我当前代码的codepen，这里是与黄色按钮对应的代码段：

#yellow {
width: 100px;
height: 100px;
background: yellow;
border: none;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

Answer 1

尝试将所有这些内容包含在div中并按下面的方式使用div

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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">&nbsp;</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>

＆＃13;

＆＃13;

＆＃13;