<html>
<style>
.transform {
transform: rotate(45deg);
}
</style>
<div class="transform"></div>
<svg>
<rect width="150" height="150"
class="transform" />
</svg>
</html>
<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>
<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>
<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>
<svg>
<rect width="100" height="100"
fill="green"
transform="translate(100px, 100)
rotate ( 45deg) , scale( 1 )" />
</svg>