Skip to content

Commit

Permalink
docs(CSS): Add interactive examples for translate, rotate, scale (mdn…
Browse files Browse the repository at this point in the history 
…#22976)

* chore(CSS): Add CSS translate, rotate, scale interactive examples

* docs(CSS): Add interactive examples for translate, rotate, scale. Minor impropvements to embedded examples

* docs(CSS): Add interactive examples for translate, rotate, scale. Minor impropvements to embedded examples

* Apply suggestions from code review

Co-authored-by: Estelle Weyl <[email protected]>

* Update files/en-us/web/css/translate/index.md

Co-authored-by: Estelle Weyl <[email protected]>

* docs(CSS): changes following reviewer feedback

Co-authored-by: Estelle Weyl <[email protected]>
  • Loading branch information
@bsmth @estelle
bsmth and estelle committed Jan 2, 2023
1 parent 825dba7 commit 0230ba2
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 82 deletions.
51 changes: 24 additions & 27 deletions files/en-us/web/css/rotate/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ browser-compat: css.properties.rotate

The **`rotate`** [CSS](/en-US/docs/Web/CSS) property allows you to specify rotation transforms individually and independently of the {{CSSxRef("transform")}} property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` property.

{{EmbedInteractiveExample("pages/css/rotate.html")}}

## Syntax

```css
Expand Down Expand Up @@ -66,53 +68,48 @@ rotate: unset;

## Examples

### Rotate an element on hover
### Rotating an element on hover

The following example shows how to use the `rotate` property to rotate an element along various axes on hover.
The first box rotates 90 degrees on the Z axis hover, the second rotates 180 degrees on the Y axis on hover, and the third rotates 360 degrees on hover around a vector defined by coordinates.

#### HTML

```html
<div>
<p class="rotate">Rotation</p>
</div>
<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>
```

#### CSS

```css
* {
box-sizing: border-box;
}

html {
font-family: sans-serif;
}

div {
width: 150px;
margin: 0 auto;
.box {
display: inline-block;
margin: 1em;
min-width: 6.5em;
line-height: 6.5em;
text-align: center;
transition: 1s ease-in-out;
border: 0.25em dotted;
}

p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
text-align: center;
#box1:hover {
rotate: 90deg;
}

.rotate {
transition: rotate 1s;
#box2:hover {
rotate: y 180deg;
}

div:hover .rotate {
rotate: 1 -0.5 1 180deg;
#box3:hover {
rotate: 1 2 1 360deg;
}
```

#### Result

{{EmbedLiveSample("Rotate_an_element_on_hover")}}
{{EmbedLiveSample("Rotating_an_element_on_hover", "100%", 150)}}

## Specifications

Expand Down
47 changes: 20 additions & 27 deletions files/en-us/web/css/scale/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ browser-compat: css.properties.scale

The **`scale`** [CSS](/en-US/docs/Web/CSS) property allows you to specify scale transforms individually and independently of the {{CSSxRef("transform")}} property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` value.

{{EmbedInteractiveExample("pages/css/scale.html")}}

## Syntax

```css
Expand Down Expand Up @@ -64,51 +66,42 @@ scale: unset;

### Scaling an element on hover

The following example shows how to scale an element on hover.
Two boxes are shown, one with a single `scale` value which scales the element along both axes.
The second box has two `scale` values which scales the element along the X and Y axes independently.

#### HTML

```html
<div>
<p class="scale">Scaling</p>
</div>
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>
```

#### CSS

```css
* {
box-sizing: border-box;
}

html {
font-family: sans-serif;
}

div {
width: 150px;
margin: 0 auto;
}

p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
.box {
float: left;
margin: 1em;
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}

.scale {
transition: scale 1s;
#box1:hover {
scale: 1.25;
}

div:hover .scale {
scale: 2 0.7;
#box2:hover {
scale: 1.25 0.75;
}
```

#### Result

{{EmbedLiveSample("Scaling_an_element_on_hover")}}
{{EmbedLiveSample("Scaling_an_element_on_hover", "100%", 150)}}

## Specifications

Expand Down
60 changes: 32 additions & 28 deletions files/en-us/web/css/translate/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ browser-compat: css.properties.translate

The **`translate`** [CSS](/en-US/docs/Web/CSS) property allows you to specify translation transforms individually and independently of the {{CSSxRef("transform")}} property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` value.

{{EmbedInteractiveExample("pages/css/translate.html")}}

## Syntax

```css
Expand Down Expand Up @@ -61,51 +63,53 @@ translate: unset;

## Examples

### HTML
### Translating an element on hover

This example shows how to use the `translate` property to move an element in three axes.
The first box is moved along the X axis and the second box is moved along the X and Y axes.
The third box is moved along the X, Y and Z axes and has the appearance of moving toward the viewer because of the addition of {{cssxref('perspective')}} to the parent element.

#### HTML

```html
<div>
<p class="translate">Translation</p>
<div class="wrapper">
<div id="box1">translate X</div>
<div id="box2">translate X,Y</div>
<div id="box3">translate X,Y,Z</div>
</div>
```

### CSS
#### CSS

```css
* {
box-sizing: border-box;
}

html {
font-family: sans-serif;
.wrapper {
perspective: 100px;
display: inline-flex;
gap: 1em;
}

div {
width: 150px;
margin: 0 auto;
}

p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
.wrapper > div {
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
translate: 20px;
}

.translate {
transition: translate 1s;
#box2:hover {
translate: 20px 20px;
}

div:hover .translate {
translate: 200px 50px;
#box3:hover {
translate: 5px 5px 30px;
}
```

### Result
#### Result

{{EmbedLiveSample('Examples')}}
{{EmbedLiveSample("Translating_an_element_on_hover", "100%", 175)}}

## Specifications

Expand Down

0 comments on commit 0230ba2

Please sign in to comment.