Is transform a new attribute in css3?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

Is transform a new attribute in css3?

青灯夜游

Feb 28, 2022 am 11:54 AM

css3transform

Transform is a new attribute of CSS3. It is used to set the shape change of elements and realize 2D or 3D conversion of elements. It can be used with the attribute value (transformation function) to rotate, skew, and scale the elements. scale, move translate and matrix deformation matrix.

Is transform a new attribute in css3?

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

Transform literally means transformation, which means change. It is a new attribute of CSS3, which is used to set the shape change of elements and realize 2D or 3D transformation of elements.

Transform in CSS3 mainly includes the following types: rotation rotate, distortion skew, scaling scale and mobile translate and matrix transformation matrix.

rotate Rotate

Rotate the element by the specified angle. The degree is positive and clockwise. If the set value is a positive number, it means clockwise. Rotation, if the set value is negative, it means counterclockwise rotation.
Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: #000;
    }
   .box{
        width: 100px;
        height: 100px;
        border: 1px solid #fff;
        position: relative;
        top: 100px;
        left: 100px;

    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        transform:rotate(30deg);
    }
</style>
<body>
    <div>
        <div></div>
    </div>
   

</body>
</html>

Effect:

Is transform a new attribute in css3?

##scale scaling

scale has three situations:

scale(x,y) Make the element scale horizontally and vertically at the same time
scaleX(x)The element only scales horizontally (X-axis scaling)
scaleY(y)The element scales only vertically (Y-axis scaling)

.box{
	transfrom:scale(2,2)
}
.box{
	transfrom:scaleX(2)
}
.box{
	transfrom:scaleY(2)
}

Rendering:

Is transform a new attribute in css3? ##translate Mobile

Mobile translate is divided into three types Situation:

translate(x,y)
Move horizontally and vertically at the same time (that is, the X-axis and Y-axis move at the same time);
translateX(x)
Only moves in the horizontal direction (X-axis movement);
translateY(Y)
Only Vertical movement (Y-axis movement)

.box{
	transfrom：translate(100px,20px);
}

Is transform a new attribute in css3? transform:translateX()

.box{
        transform:translateX(100px);
    }

transform:translateY() Is transform a new attribute in css3?

.box{
		transform:translateY(100px);
}

Is transform a new attribute in css3? skew distortion
skew is also divided into three situations

##skew(x,y)

skewX(x)
skewY(y)
<pre class='brush:php;toolbar:false;'>.box{ transform:skew(20deg,20deg); } .box{ transform:skewX(20deg); } .box{ transform:skewY(20deg); }</pre>

Is transform a new attribute in css3?
transform-origin Change the element base point

transform-origin(X ,Y): Used to set the base point (reference point) of the element's movement. The default point is the center point of the element. The values of X and Y can be percentage values, em, and px, and X can also be character parameter values left, center, and right; Y, like X, can also set character values top, center, and bottom in addition to percentage values.
(Learning video sharing: css video tutorial,

web front-end introductory tutorial

)

The above is the detailed content of Is transform a new attribute in css3?. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS: Can I use multiple IDs in the same DOM?May 14, 2025 am 12:20 AM

No,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure

The Aims of HTML5: Creating a More Powerful and Accessible WebMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl

Significant Goals of HTML5: Enhancing Web Development and User ExperienceMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur

HTML5: Is it secure?May 14, 2025 am 12:15 AM

HTML5isnotinherentlyinsecure,butitsfeaturescanleadtosecurityrisksifmisusedorimproperlyimplemented.1)Usethesandboxattributeiniframestocontrolembeddedcontentandpreventvulnerabilitieslikeclickjacking.2)AvoidstoringsensitivedatainWebStorageduetoitsaccess

HTML5 goals in comparison with older HTML versionsMay 14, 2025 am 12:14 AM

HTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand

CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AM

Using ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.

HTML5: Goals in 2024May 13, 2025 am 12:13 AM

HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur

What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AM

HTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr

See all articles