gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ADD: transform affects DIV child contents (#35257)

Browse Source 
* ADD: transform affects DIV child contents

After spending some time figuring out how to prevent text in a div being skewed as well as the div, I think it is worth mentioning that applying a transform to a div element will also affect elements contained inside of it. Perhaps the transform challenge pages could include how to negate the effects of the transform on child elements of divs.

* Fix: moved my commit to Description 

Moved my commit text into the Description section as suggested.

* Fix: Changed </div> to </code>

Changed the closing </div> tag to </code> as suggested.

* Fix: Changed markdown ** to <strong>

As advised on a previous pull request, I have removed the markdown ** ** and replaced it with HTML <strong></strong>.
This commit is contained in:
Lee
2019-02-21 12:25:16 +08:00
committed by Randell Dawson
parent 26b8e46af7
commit 6e44ec362c
1 changed files with 2 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.english.md
View File

@ -10,6 +10,8 @@ videoUrl: 'https://scrimba.com/c/cyLPJuM'
The <code>transform</code> property has a variety of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as <code>:hover</code> that specify a certain state of an element, the <code>transform</code> property can easily add interactivity to your elements.
Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
<blockquote>p:hover {<br>&nbsp;&nbsp;transform: scale(2.1);<br>}</blockquote>
<strong>NOTE:</strong> Applying a transform to a <code>div</code> element will also affect any child elements contained in the div.
</section>
## Instructions