CodePen

HTML

            
              <input type="checkbox" id="rot" /> <label for="rot">Reverse table</label>

<table>
  <thead>
    <tr>
      <th>Lorem.</th>
      <th>Quam.</th>
      <th>Debitis.</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nisi!</td>
      <td>Ea.</td>
      <td>Consequuntur!</td>
      <td>10.00 €</td>
    </tr>
    <tr>
      <td>Nihil.</td>
      <td>Quaerat!</td>
      <td>Possimus!</td>
      <td>15.00 €</td>
    </tr>
    <tr>
      <td>Qui.</td>
      <td>Iste.</td>
      <td>Adipisci!</td>
      <td>7.00 €</td>
    </tr>
    <tr>
      <td>Ducimus.</td>
      <td>Alias!</td>
      <td>Consectetur.</td>
      <td>14.75 €</td>
    </tr>
    <tr>
    <tr>
      <td>Aspernatur.</td>
      <td>Quo.</td>
      <td>Autem!</td>
      <td>33.50 €</td>
    </tr>
    <tr>
      <td>Cumque.</td>
      <td>Aliquam!</td>
      <td>Expedita!</td>
      <td>19.99 €</td>
    </tr>
  </tbody>
</table>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #rot:checked{
  ~table{
    &,th,td{
      transform: rotate3d(1,1,0,180deg);
    }
  }
}

table{
  font-size: 10px;
  transform-origin: 0 0;
  bordr-collapse:collapse;
  th,td{
    border:1px solid blue;
    width:80px;
    height:80px;
  }
}

#rot{
margin-left:10px;
}
label{
  font-size: 20px;
  color:#0c7;
  margin:10px;
  display:inline-block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................