Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .asin-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; } .asin-box { background-color: #20c997; 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; /* asin(0.5) equals 30deg. The box will be rotated by 30 degrees. */ transform: rotate(asin(var(--ratio))); transition: transform 0.5s ease; } .asin-box:hover { /* asin(1) equals 90deg */ transform: rotate(asin(1)); } </style> <div class="asin-container"> <div class="asin-box"> asin(0.5)<br> (30deg) </div> </div>