Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
CSS Trigonometric Functions (sin(),cos(),tan(),asin(),acos(),atan(),atan2()) allow mathematical calculations based on angles. These functions enable circular layouts, wave patterns, and complex geometric designs without JavaScript!
width: calc(sin(45deg) * 200px);Returns the sine of an angle (-1 to 1). Useful for vertical positioning in circles.
height: calc(cos(30deg) * 150px);Returns the cosine of an angle (-1 to 1). Perfect for horizontal positioning in circles.
transform: skewY(tan(10deg));Returns the tangent of an angle. Useful for slopes and skew effects.
sin()cos()tan()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trigonometric Functions - Rotation Demo</title>
</head>
<body>
<div class="container">
<h1>📐 Trigonometric Functions</h1>
<p class="subtitle">Angle-based transformations and calculations</p>
<div class="demo-area">
<div class="angle-demo">
<div class="angle-label">15°</div>
<div class="box rotate-15">15°</div>
</div>
<div class="angle-demo">
<div class="angle-label">30°</div>
<div class="box rotate-30">30°</div>
</div>
<div class="angle-demo">
<div class="angle-label">45°</div>
<div class="box rotate-45">45°</div>
</div>
<div class="angle-demo">
<div class="angle-label">60°</div>
<div class="box rotate-60">60°</div>
</div>
</div>
<div class="info-box">
<div class="info-title">🧮 Trig Functions in CSS</div>
<p class="info-text">
While CSS supports <code>sin()</code>, <code>cos()</code>, and <code>tan()</code> functions for mathematical
calculations, they have <strong>limited browser support</strong>. This demo shows angle-based rotations using
the widely-supported <code>rotate()</code> transform instead. For circular layouts and complex positioning,
trigonometric functions will be powerful once fully supported!
</p>
</div>
</div>
</body>
</html>Loading preview...