Rotate CSS Property - Learn CSS Transforms by Building a Penguin - Step 84

Describe the Issue

Individual Transform is recently added to the specification module level 2 and allows developer to use rotate: 90deg as opposed to transform: rotate(90deg). Most browsers has adopted this feature and I can see it simplifies the coding experience as it is easier to remember.

Obviously it is new and might be a concern in backward-compatibility, however it would be weird to create a website that uses the rotate transform to support old browser in general.

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-84

Your code

.foot.left {
  left: 25%;
  rotate: 80deg;
  /* transform: rotate(80deg); */
}

.foot.right {
  right: 25%;
  rotate: -80deg;
  /* transform: rotate(-80deg); */
}

Expected behavior

It should be accepted

Screenshots

System

• Device: PC
• OS: Windows 10
• Browser: Brave
• Version: Latest

Additional context

Correct me if I’m wrong, I am still new in using GitHub with other people 😃

[bbsmooth]

it would be weird to create a website that uses the rotate transform to support old browser in general.

I’m going to disagree just a little here.

Can I Use: CSS property: rotate

Firefox has had this for a while now but Chrome/Edge have only had it for the last few new versions. People from all over the world use this site. Not all of them have the latest versions of things. If the rotation was crucial for my website then I would not use the rotate property if I wanted everyone to see it.

I guess it depends if we are OK with some people not passing this step and the only solution is to upgrade their browser and they might not be able to.

[Sboonny]

There are multiple steps that require, using transform: , I have listed them below.

I think the test should accept the values, because they are rendered correctly and consider a correct syntax.

Should the description be changed?

The files

• step 16: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md
• step 23: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md
• stop 84: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md
• step 90: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md
• step 91: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md
• step 92: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md
• step 97: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md
• step 98: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
• step 99: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md
• step 101: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md