body{background-color: orange;}
#content{width: 900px;
     height: 800px;
     margin: auto; 

     font-family: Arial, Helvetica, Verdana;}
#text{width: 900px;
      height: 110px;
      margin: auto;
      position: relative;
      box-shadow: 2px 2px 5px #999;
      text-align: center;
      justify-content: center;
      margin-bottom: 10px;}

.main{width: 150px;
     height: 150px;
     border-radius:8px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;}
#box  {width: 900px;
     height:600px;  
     box-shadow: 2px 2px 5px #999;
     margin: auto;
     position: relative; }

#select{ margin-left:670px; width: 200px;   }
#check{padding-bottom: 30px; width: 800px; height:20px;  margin-left: 80px;}

#box1{background-color: pink; transition: width 2s, height 2s, transform 2s, background-color 2s; }
#box2{background-color: #B45F04; transition: width 2s, height 2s, transform 2s, background-color 2s; }
#box3{background-color: tan; transition: width 2s, height 2s, transform 2s, background-color 2s; }
#box4{background-color: #04B486; transition: width 2s, height 2s, transform 2s, background-color 2s; }
#box5{background-color: #AEB404; transition: width 2s, height 2s, transform 2s, background-color 2s; }
#box6{background-color: #F5DA81; transition: width 2s, height 2s, transform 2s, background-color 2s;  }

input,label,select{ font-size: 22px;}
p{font-size: 3em;}

.Rotar{width: 150px;
         height: 150px;
         border-radius:10px;
         display: inline-block;
         margin: 0px 120px 120px 20px;
         text-align: center;
        transform: rotate(180deg);} 
.Translate{width: 150px;
         height: 150px;
         border-radius:10px;
         display: inline-block;
         margin: 0px 120px 120px 20px;
         text-align: center;
         transform: translate(3em,2em); }  

.Skew{width: 150px;
     height: 150px;
     border-radius:10px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;
     transform: skew(20deg, 10deg);  } 

.Scale{width: 150px;
     height: 150px;
     border-radius:10px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;
     transform: scale(1.2 ,1.2); }
.Rotate3d{ width: 150px;
     height: 150px;
     border-radius:10px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;
     transform:  rotate3d(1, -1, 0, 70deg);}
 #box1:hover { width: 150px;
     height: 150px;
     border-radius:10px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;
     background-color: #0B173B;            
     transform: translate(3em, 2em);}
#box2:hover{ width: 150px;
     height: 150px;
     border-radius:10px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;
     transform: rotate(180deg);            
     background-color: gray;}
#box3:hover{ width: 150px;
     height: 150px;
     border-radius:10px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;
     transform: rotate(180deg);            
     background-color: gray;}
#box4:hover{ width: 150px;
     height: 150px;
     border-radius:10px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;
     transform: skew(40deg, 0deg);
      background-color: orchid;}
#box5:hover{ width: 150px;
     height: 150px;
     border-radius:10px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;
     transform: translate(110px, 20px);
     background-color: #610B21;}
#box6:hover{ width: 150px;
     height: 150px;
     border-radius:10px;
     display: inline-block;
     margin: 0px 120px 120px 20px;
     text-align: center;
     transform: rotate(180deg);
     background-color: #BCA9F5;}