Rotation and Relative Rotation.html

<!DOCTYPE html>
<html>
  <head>   
    <title>Basic primitives</title>    
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- green box | Parent Entity -->
      <a-box color="#689F38"
             width="4"
             height="2"
             depth="0.2"
            position="0 1 -7"
             rotation="90 0 0">
        
            <!-- circle | Child entity-->
            <a-circle color="#333333"
                      side="double"
                      position="2 0 0"
                      rotation="90 0 0"></a-circle>
      </a-box>
      
      <!--- Circ;e -->
      <a-circle color="#FFC107"
                  side="double"
                  position="-2 1 -7">
      </a-circle>      
      
      <!-- cylinder -->
      <a-cylinder color="#616161"
             radius="2"
             height="2"
             
                  
              open-ended="true"
                  side="double"
                  position="0 0 1"
                  rotation="0 -90 90">
      </a-cylinder>
      
    </a-scene>
  </body>
</html>