2018-09-30 22:01:58 +00:00
---
id: 587d78a6367417b2b2512adc
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
challengeType: 0
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
2019-08-05 16:17:33 +00:00
forumTopicId: 301075
2021-01-13 02:31:00 +00:00
dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Given that the `skewX()` function skews the selected element along the X-axis by a given degree, it is no surprise that the `skewY()` property skews an element along the Y (vertical) axis.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Skew the element with the id of `top` -10 degrees along the Y-axis by using the `transform` property.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
The element with id `top` should be skewed by -10 degrees along its Y-axis.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
2018-10-08 00:01:53 +00:00
div {
2018-09-30 22:01:58 +00:00
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
#bottom {
background-color: blue;
transform: skewX(24deg);
}
< / style >
< div id = "top" > < / div >
< div id = "bottom" > < / div >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-28 18:13:38 +00:00
```html
< style >
div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
transform: skewY(-10deg);
}
#bottom {
background-color: blue;
transform: skewX(24deg);
}
< / style >
< div id = "top" > < / div >
< div id = "bottom" > < / div >
2018-09-30 22:01:58 +00:00
```