Move rotated CSS element

Question

I have 4 buttons each rotated 45° and would like to achieve something similar to the picture, I've tried applying margin left and/or button, but since the element is rotated the margins are also rotated with it and transform-origin didn't seem to work for me (or I didn't use it properly).

Here is a codepen with my current code and here is the snippet corresponding to the yellow button:

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

Answer 1

try enclosing all of them inside a div and rote the div like below

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">&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>

Answer 2

Your buttons are all separate objects so they are getting rotated on their own axis's and thus rotating their margins and such. So to start, you can put all your buttons in a 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>

From here, remove all the margins on your buttons and enter floats instead:

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

Now that all your objects are in a group, you can just rotate the group. I added some absolute positioning to center it in the window as well.

.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