What type of deformation function does css3 include?-Front-end Q&A-php.cn

What type of deformation function does css3 include?

青灯夜游

Release： 2022-03-18 15:35:55

Original

2222 people have browsed it

The deformation function of css3 includes 4 types: 1. Rotation, implemented using rotate(), rotateX(), etc.; 2. Scaling, implemented using scale(), scaleX(), etc.; 3. Tilt, implemented using skew(), skewX(), etc. are implemented; 4. Movement, implemented using translate(), etc.

What type of deformation function does css3 include?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The main value of transformation is to use the transform function to realize the four processes of rotation, scaling, tilting and movement of text or pictures.

1. Rotation-----transform:rotate(xxdeg);

(IE9 or above, Safari 3.1 or above, Browsers chrome 8 or above, FireFox 4 or above, Opera 10 or above all support these attributes)

Let’s look at the example first:

<p id="test3">
     这是一个测试。
</p>
#test3{
     width:300px;
     margin: 100px auto;
     font-size: 40px;
     transform:rotate(45deg);
      }

Copy after login

transform:rotate(45deg); This sentence means that the p element is clockwise 45 degree rotation, deg is an angle unit. The effect is as follows:

##2. Zoom-----transform:scale(x)

<p id="test4">
        这是一个测试。
</p>

 #test4{
          width:300px;
          margin: 100px auto;
          font-size: 40px;
          transform:scale(0.5);  
  }

Copy after login

You can also specify the horizontal and vertical scaling of the element separately. For example, the element shrinks by 50% in the horizontal direction and doubles in the vertical direction:

<p id="test5">
    这是一个测试。
</p>

#test5{
   width:300px;
   margin: 100px auto;
   font-size: 40px;
   transform:scale(0.5,2);  
}

Copy after login

The effects of the above two scalings are as follows:

3. Tilt: Use the skew method to realize the tilt processing of text or pictures. The two parameters specify the tilt angle in the horizontal direction and the tilt angle in the vertical direction respectively. Example:

<p id="test6">
    这是一个测试。
</p>

#test6{
      width:300px;
      margin: 100px auto;
      font-size: 40px;
      transform:skew(30deg,45deg);      
 }

Copy after login

If there is only one parameter, the default is to tilt only in the horizontal direction and not in the vertical direction.

4. Movement: Use the translate method, and the two parameters specify the movement distance in the horizontal and vertical directions respectively. If there is only one parameter, the default is to move only in the horizontal direction and not in the vertical direction.

<p id="test7">
        这是一个测试。
</p>

 #test7{
      width:300px;
      margin: 100px auto;
      font-size: 40px;
      transform:translate(150px,150px);  
 }

Copy after login

These transformations can also be used in combination:

<p id="test8">
        这是一个测试。
</p>

#test8{
    width:300px;
    margin: 100px auto;
    font-size: 40px;
    transform:rotate(45deg) scale(0.5) skew(30deg,45deg) translate(150px,150px);      
  }

Copy after login

Rotate the element 45 degrees clockwise, shrink it by half, then tilt it 30 degrees horizontally, 45 degrees vertically, respectively. Move 150px in the horizontal and vertical directions, the effect is as follows:

You can specify the base point of the transformation: when using transform to transform, the center of the element is used as the basis point. . The origin can be changed using the transform-origin attribute.

<p id="test9">
    这是一个测试。
</p>

<p id="test10">
    这是一个测试。
</p>

#test9{
     position: absolute;
      width:150px;
      height:150px;
      background: green;
      margin: 100px 200px;
      font-size: 20px;
      transform:rotate(45deg);  
      }#test10{
      position: absolute;
      width:150px;
      height:150px;
      background: red;
      margin: 100px 200px;
      font-size: 20px;
      transform-origin:left top; /*定基准点*/
      transform:rotate(45deg)      
      }

Copy after login

The effect is as follows: (red is to push the base point to the upper left point, green is the default)

The value of the transform-origin attribute, the previous one is "The position of the reference point in the horizontal direction of the element", the values that can be specified are: left, center, right; the latter value is "the position of the reference point in the vertical direction of the element", the values that can be specified are: top, center, bottom.

(Learning video sharing:

css video tutorial, web front-end)

The above is the detailed content of What type of deformation function does css3 include?. For more information, please follow other related articles on the PHP Chinese website!