Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> div.a { width: 120px; height: 120px; background-color: salmon; margin-bottom: 35px; } div.b { width: 120px; height: 120px; background-color: green; transform: rotate(25deg); } div.c { width: calc(120px * cos(25deg)); height: calc(120px * cos(25deg)); margin: calc(120px/4 * cos(25deg)); background-color: maroon; transform: rotate(25deg); transform-origin: center; translate: -10px 10px; } </style> </head> <body> <h1>The cos() Function</h1> <p>When an element is rotated with rotate(), it goes beyond its initial size (see second rectangle).</p> <p>To fix this, we will use cos() to update the element size.</p> <p>Here, cos() is used within the calc() function to determine the width, height, and margin of the third rectangle element. We also need to also adjust the transform-origin and add translate() to correct the position.</p> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html>
