Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .atan-container { /* We define a ratio of 1 */ --ratio: 1; background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 40px; height: 200px; display: flex; align-items: center; justify-content: center; } .atan-box { background-color: #fd7e14; color: white; font-family: sans-serif; font-weight: bold; display: flex; align-items: center; justify-content: center; text-align: center; width: 120px; height: 120px; border-radius: 8px; /* atan(1) equals 45deg. The box will be rotated by 45 degrees. */ transform: rotate(atan(var(--ratio))); transition: transform 0.5s ease; } .atan-box:hover { /* atan(0) equals 0deg */ transform: rotate(atan(0)); } </style> <div class="atan-container"> <div class="atan-box"> atan(1)<br> (45deg) </div> </div>