Creating a Clock with the New CSS sin() and cos() Trigonometry Functions

New features of CSS: sin() and cos() trigonometric functions create clock effects

The latest versions of Firefox and Safari have supported CSS trigonometric functions! This brings powerful mathematical computing capabilities to CSS and expands infinite possibilities. This tutorial will focus on the sin() and cos() functions and create a clock using it. While other trigonometric functions such as tan() are coming soon, sin() and cos() functions are well suited to the goal of arranging text along the circumference, which was implemented by Chris using Sass mixin on CSS-Tricks six years ago, let's re-implement it with the latest technology.

Target effect (currently only supported by Firefox and Safari):

We arrange text characters along the circumference to form a clock face. The initial HTML structure is as follows:

<div class="clock">
  <div class="clock-face">
    <time datetime="12:00">12</time><time datetime="1:00">1</time><time datetime="2:00">2</time><time datetime="3:00">3</time><time datetime="4:00">4</time><time datetime="5:00">5</time><time datetime="6:00">6</time><time datetime="7:00">7</time><time datetime="8:00">8</time><time datetime="9:00">9</time><time datetime="10:00">10</time><time datetime="11:00">11</time>
  </div>
</div>

Next, add the basic style to the .clock container, use the <time></time> tag and add the datetime attribute:

.clock {
  --_ow: clamp(5rem, 60vw, 40rem);
  --_w: 88cqi;
  aspect-ratio: 1;
  background-color: tomato;
  border-radius: 50%;
  container-type: inline;
  display: grid;
  height: var(--_ow);
  place-content: center;
  position: relative;
  width: var(--_ow);
}

This is just to create basic shapes and background colors to facilitate observation of effects. Note that we store the width value in the CSS variable and will be used later.

Now, add a variable --_r to store the radius of the circle, which is equal to half the width of the circle, and implement it using the calc() function:

.clock {
  --_w: 300px;
  --_r: calc(var(--_w) / 2);
  /* rest of styles */
}

Mathematical calculation: The circumference is 360 degrees, the clock has 12 numbers, each digit is spaced 30 degrees (360/12). Mathematically, the circle starts at 3 o'clock, so 12 o'clock is actually -90 degrees, which is 270 degrees (360 - 90).

Add variable --_dSet the degree value of each number, incrementing in 30 degrees:

.clock time:nth-child(1) { --_d: 270deg; }
.clock time:nth-child(2) { --_d: 300deg; }
.clock time:nth-child(3) { --_d: 330deg; }
/* ... rest of the numbers ... */

Now, use the sin() and cos() functions to calculate the X and Y coordinates of each number:

X coordinate formula: radius (radius * cos (degree))

--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));

Y coordinate formula: radius (radius * sin(degree))

--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));

Add basic styles to numbers so they are absolutely positioned and use the calculated coordinates:

.clock-face time {
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  --_sz: 12cqi;
  display: grid;
  height: var(--_sz);
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: var(--_sz);
}

In order to position more accurately, when calculating the radius, the size of the number needs to be subtracted:

--_r: calc((var(--_w) - var(--_sz)) / 2);

Change the color to make it more beautiful.

Next, add the hour, minute and second hands:

Add HTML structure:

<div class="arm hours"></div>
<div class="arm minutes"></div>
<div class="arm seconds"></div>

Add style:

.arm {
  /* ... styles ... */
}

.seconds { /* ... styles ... */ }
.minutes { /* ... styles ... */ }
.hours { /* ... styles ... */ }

@keyframes turn { /* ... animation ... */ }

Finally, use JavaScript to set the current time:

// ... JavaScript code to set initial time ...

Add browser compatibility processing:

@supports not (left: calc(1px * cos(45deg))) {
  /* fallback styles */
}

Final effect: a complete CSS clock! Currently, only Firefox and Safari browsers are supported.

In addition, the clock can be transformed into a circular image library or other creative patterns.

The above is the detailed content of Creating a Clock with the New CSS sin() and cos() Trigonometry Functions. For more information, please follow other related articles on the PHP Chinese website!