Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .acos-container { /* We define a ratio between -1 and 1 */ --ratio: 0.5; background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 40px; height: 200px; display: flex; align-items: center; justify-content: center; } .acos-box { background-color: #e83e8c; 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; /* acos(0.5) equals 60deg. The box will be rotated by 60 degrees. */ transform: rotate(acos(var(--ratio))); transition: transform 0.5s ease; } .acos-box:hover { /* acos(0) equals 90deg */ transform: rotate(acos(0)); } </style> <div class="acos-container"> <div class="acos-box"> acos(0.5)<br> (60deg) </div> </div>