In dynamic CSS, you can resize rotation radius using CSS Custom Properties (Variables). As custom properties are now in the latest browsers from Mozilla, Google, Opera, Apple, and Microsoft – it’s definitely a good time to explore and experiment.
- First, defines a global custom property named “–radius”.
- Then use calc() function to calculate “–radius” value that is 45deg. Here, you can also use any other defined variables to calculate the radius as per your need.
- It can be used to resize the rotation radius.
- Then it uses the var() function to insert the value of the custom property to rotate the object.
- Before clicking the button:
- After clicking the button: