Skip to content

Commit c51c4c3

Browse files
ramiyestelleJosh-Cenagithub-actions[bot]
authored
Add interactive examples to sin() and cos() CSS functions (mdn#40441)
* Add interactive examples to `sin()` and `cos()` CSS functions * lint * lint * Update * Update * lint * Update * Update * Update * lint * Apply suggestions from code review Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update * Update * Update * Update * Update * Update * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update * Update --------- Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 8b87b06 commit c51c4c3

File tree

2 files changed

+124
-0
lines changed

2 files changed

+124
-0
lines changed

‎files/en-us/web/css/cos/index.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,68 @@ sidebar: cssref
88

99
The **`cos()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions) is a trigonometric function that returns the cosine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a {{cssxref("&lt;number&gt;")}} or an {{cssxref("&lt;angle&gt;")}} by interpreting the result of the argument as radians. That is, `cos(45deg)`, `cos(0.125turn)`, and `cos(3.14159 / 4)` all represent the same value, approximately `0.707`.
1010

11+
{{InteractiveExample("CSS Demo: cos()")}}
12+
13+
```css interactive-example-choice
14+
transform: translateX(calc(cos(0deg) * 140px))
15+
translateY(calc(sin(0deg) * -140px));
16+
```
17+
18+
```css interactive-example-choice
19+
transform: translateX(calc(cos(90deg) * 140px))
20+
translateY(calc(sin(90deg) * -140px));
21+
```
22+
23+
```css interactive-example-choice
24+
transform: translateX(calc(cos(135deg) * 140px))
25+
translateY(calc(sin(135deg) * -140px));
26+
```
27+
28+
```css interactive-example-choice
29+
transform: translateX(calc(cos(180deg) * 140px))
30+
translateY(calc(sin(180deg) * -140px));
31+
```
32+
33+
```css interactive-example-choice
34+
transform: translateX(calc(cos(-45deg) * 140px))
35+
translateY(calc(sin(-45deg) * -140px));
36+
```
37+
38+
```html interactive-example
39+
<div class="circle">
40+
<span class="dot" id="example-element"></span>
41+
</div>
42+
```
43+
44+
```css interactive-example
45+
:root {
46+
--radius: 140px;
47+
--dotsize: 10px;
48+
}
49+
.circle {
50+
display: grid;
51+
place-content: center;
52+
margin: 0 auto;
53+
width: calc(var(--radius) * 2);
54+
aspect-ratio: 1;
55+
border-radius: 50%;
56+
border: 2px solid #666;
57+
background-image:
58+
radial-gradient(black var(--dotsize), transparent var(--dotsize)),
59+
linear-gradient(135deg, #0000ff, #00c9ff, #92fe9d, #e6e6fa, #f0fff0);
60+
}
61+
.dot {
62+
display: block;
63+
width: var(--dotsize);
64+
aspect-ratio: 1;
65+
border-radius: 50%;
66+
border: 2px solid #666;
67+
background-color: #f66;
68+
transform: translateX(calc(cos(0deg) * var(--radius)))
69+
translateY(calc(sin(0deg) * var(--radius) * -1));
70+
}
71+
```
72+
1173
## Syntax
1274

1375
```css

‎files/en-us/web/css/sin/index.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,68 @@ sidebar: cssref
88

99
The **`sin()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions) is a trigonometric function that returns the sine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a {{cssxref("&lt;number&gt;")}} or an {{cssxref("&lt;angle&gt;")}} by interpreting the result of the argument as radians. That is, `sin(45deg)`, `sin(0.125turn)`, and `sin(3.14159 / 4)` all represent the same value, approximately `0.707`.
1010

11+
{{InteractiveExample("CSS Demo: sin()")}}
12+
13+
```css interactive-example-choice
14+
transform: translateX(calc(cos(0deg) * 140px))
15+
translateY(calc(sin(0deg) * -140px));
16+
```
17+
18+
```css interactive-example-choice
19+
transform: translateX(calc(cos(90deg) * 140px))
20+
translateY(calc(sin(90deg) * -140px));
21+
```
22+
23+
```css interactive-example-choice
24+
transform: translateX(calc(cos(135deg) * 140px))
25+
translateY(calc(sin(135deg) * -140px));
26+
```
27+
28+
```css interactive-example-choice
29+
transform: translateX(calc(cos(180deg) * 140px))
30+
translateY(calc(sin(180deg) * -140px));
31+
```
32+
33+
```css interactive-example-choice
34+
transform: translateX(calc(cos(-45deg) * 140px))
35+
translateY(calc(sin(-45deg) * -140px));
36+
```
37+
38+
```html interactive-example
39+
<div class="circle">
40+
<span class="dot" id="example-element"></span>
41+
</div>
42+
```
43+
44+
```css interactive-example
45+
:root {
46+
--radius: 140px;
47+
--dotsize: 10px;
48+
}
49+
.circle {
50+
display: grid;
51+
place-content: center;
52+
margin: 0 auto;
53+
width: calc(var(--radius) * 2);
54+
aspect-ratio: 1;
55+
border-radius: 50%;
56+
border: 2px solid #666;
57+
background-image:
58+
radial-gradient(black var(--dotsize), transparent var(--dotsize)),
59+
linear-gradient(135deg, #0000ff, #00c9ff, #92fe9d, #e6e6fa, #f0fff0);
60+
}
61+
.dot {
62+
display: block;
63+
width: var(--dotsize);
64+
aspect-ratio: 1;
65+
border-radius: 50%;
66+
border: 2px solid #666;
67+
background-color: #f66;
68+
transform: translateX(calc(cos(0deg) * var(--radius)))
69+
translateY(calc(sin(0deg) * var(--radius) * -1));
70+
}
71+
```
72+
1173
## Syntax
1274

1375
```css

0 commit comments

Comments
 (0)