CSS3 Transforms

Demos

Table of content

  • CSS Transforms on HTML and SVG
  • Transform-Origin
  • CSS Transitions
  • CSS Animations
  • Presentation attribute

CSS Transforms on HTML and SVG










<html>

<style>

.transform {

transform: rotate(45deg);

}

</style>


<div class="transform"></div>

<svg>

<rect width="150" height="150"

class="transform" />

</svg>

</html>

DIV
RECT

transform-origin (1)

  • Different defaults for 'transform-origin'
    • HTML: 'center center'
    • SVG (without CSS layout box): '0 0'
Initial values on SVG and HTML rotate(45deg) on SVG rotate(45deg) on HTML

transform-origin (2)


<svg>

<style>

rect {

transform-origin: bottom right;

transform:

   translate(50px,150px)

   scale(1.5)

   rotate(45deg);

}

</style>

<rect width="100" height="100"

 fill="green"/>

</svg>

CSS Transitions










<svg>

<style>

circle {

transform: scale(1);

transform-origin: center;

}


circle:hover {

transform: scale(2);

transition-property: transform;

transition-duration: 3s;

}

</style>


<circle cx="50%" cy="50%" r="100"/>

</svg>

CSS Animations




<svg>

<style>

@keyframes transform {

from { }

to {

fill: yellow;

transform:

   translate(120px, 140px);

}

}

circle {

fill: green;

animation-name: transform;

animation-duration: 3s;

}

</style>

<circle cx="100" cy="100" r="100"/>

</svg>

Presentation Attribute




<svg>

<rect width="100" height="100"

fill="green"

transform="translate(100px, 100)

rotate ( 45deg) , scale( 1 )" />

</svg>


Dirk Schulze
dschulze@adobe.com

Rebecca Hauck
rhauck@adobe.com