<div class="deg">
<p>-45deg</p>
</div>
<div class="grad">
<p>110grad</p>
</div>
<div class="rad">
<p>0.548rad</p>
</div>
<div class="turn">
<p>-0.05turn</p>
</div>
body {
padding-top: 40px;
font-family: Roboto, sans-serif;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
}
div {
margin-bottom: 30px;
background: #651FFF;
color: #FFF;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.deg {
transform: rotate(-45deg);
}
.grad {
transform: rotate(110grad);
}
.rad {
transform: rotate(0.548rad);
}
.turn {
transform: rotate(-0.05turn);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.