<!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>