'what does double yellow line indicate in vs-code? how to understand the language of errors in vs-code?

enter image description here A couple of double yellow lines appear beneath my codes in vscode, It gives a message which says: a two dimensional transformation is applied to an element through "transform" property. this property contain a list of transform functions similar to SVGs. define the standard property 'transform' for compatibility CSS(vendorprefix). The code goes as follows: and by the way for the attribute scale how can we double it (2, 2), why there are two numbers, can we double a div by the vertical and horizontal sides apart??

<html>
    <head>
        <style>
            #d1
            {
                width: 200px;
                height:200px;
                background-color: aquamarine;
                -webkit-transform: rotate(10deg);
                -moz-transform: rotate(10deg);
                -o-transform: rotate(10deg);
                -ms-transform: rotate(10deg);
                border-radius: 35px;
                -webkit-transform: translate (450px,250px); 
                -webkit-transform: scale(2,2);
                -webkit-transform: skew (30deg , 20deg);
              

                

            }
            
        </style>

    </head>
    <body>
        <div id="d1">
            Hanieh a forgiving girl 

        </div>
        

    </body>
</html>
cssvisual-studio-code


Solution 1:[1]

I assume the yellow double lines will disappear when you correct the syntax of the transform property. All transform definition rules must be in one line as below.

#d1 {
  width: 200px;
  height: 200px;
  background-color: aquamarine;
  border-radius: 35px;

  -webkit-transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
     -moz-transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
      -ms-transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
       -o-transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
          transform: scale(2) rotate(10deg) translate(45px, 25px) skew(30deg, 20deg);
  
}
<div id="d1">
  Hanieh a forgiving girl
</div>

Solution 2:[2]

The yellow line is a warning. You defined -[prefix]-transform but did not set transform without prefix.

You should also see warning icons at the bottom left corner of VSCode (two icons, one for errors, one for warnings). Click on those to get a detailed report.

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Baro
Solution 2 Will

Related Questions