<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 80px;
height: 80px;
background-color: pink;
}
div.a {
transform: rotate(calc(1turn * exp(1)));
}
div.b {
transform: rotate(calc(1turn * exp(0)));
}
div.c {
transform: rotate(calc(1turn * exp(-1)));
}
div.d {
transform: rotate(calc(1turn * exp(-0.90)));
}
</style>
</head>
<body>
<h1>The exp() Function</h1>
<p>Use exp() to rotate elements:</p>
<h2>transform: rotate(calc(1turn * exp(1))):</h2>
<div class="a">Hello World!</div>
<br>
<h2>transform: rotate(calc(1turn * exp(0))):</h2>
<div class="b">Hello World!</div>
<br>
<h2>transform: rotate(calc(1turn * exp(-1))):</h2>
<div class="c">Hello World!</div>
<h2>transform: rotate(calc(1turn * exp(-0.90))):</h2>
<div class="d">Hello World!</div>