position elements across an Axis - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

position elements across an Axis

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width"> 
  <title>Lorem ipsum dolo</title> 
  <style>
* {<!--   w  w  w  .  ja v  a2 s. c om-->
   margin:0;
   padding:0;
}

svg {
   width:100%;
   position:relative;
   height:401px;
   animation:3s foo infinite;
}

.point {
   cursor:pointer;
   stroke-width:2px;
   stroke-opacity:.3;
   fill-opacity:.6;
   transition-property:opacity, fill;
   fill:red;
   stroke:red;
   fill-opacity:.4;
   cursor:default;
   animation:none;
   transform:none;
   animation-fill-mode:backwards;
}

@keyframes foo {
   50% {
      transform:scale(3);
   }

}
</style> 
 </head> 
 <body> 
  <svg> 
   <g transform="translate(64.00000000000006,68.83456057464876)"> 
    <circle class="point stroke" r="26.428571428571427" /> 
    <circle class="point" r="26.428571428571427" /> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials