freeCodeCamp/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.english.md at b2a942c6f4669485680fac40f21dfcd97b378f30

Files

Valeriy 79d9012432 fix(curriculum): quotes in tests (#18828 )

* fix(curriculum): tests quotes

* fix(curriculum): fill seed-teardown

* fix(curriculum): fix tests and remove unneeded seed-teardown

2018-10-20 23:32:47 +05:30

1.5 KiB

Raw Blame History

id, title, challengeType, videoUrl

id	title	challengeType	videoUrl
587d78a6367417b2b2512adb	Use the CSS Transform Property skewX to Skew an Element Along the X-Axis	0	https://scrimba.com/c/cyLP8Sr

Description

The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree. The following code skews the paragraph element by -32 degrees along the X-axis.

p {
transform: skewX(-32deg);
}

Instructions

Skew the element with the id of bottom by 24 degrees along the X-axis by using the transform property.

Tests

tests:
  - text: The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.
    testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), 'The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.');

Challenge Seed

<style>
  div {
    width: 70%;
    height: 100px;
    margin:  50px auto;
  }
  #top {
    background-color: red;
  }
  #bottom {
    background-color: blue;

  }
</style>

<div id="top"></div>
<div id="bottom"></div>

Solution

var code = "#bottom {background-color: blue; transform: skewX(24deg);}"

1.5 KiB Raw Blame History