9/1/22, 12:19 PM
`
`CSS transform property
`
`V\3 Tutorial s• References•
`
`sehools
`
`Exercises• Menu•
`
`Pro
`
`Get Certified
`
`Free Website
`
`Login
`
`HTML
`
`css
`
`JAVASCRIPT
`
`SQL
`
`PYTHON
`
`PHP
`
`()
`
`Q.
`
`CSS transform Property
`[ < Previous
`
`J
`
`Complete •CSS Reference
`
`Example
`
`Rotate, skew, and scale three different <div> elements:
`
`div. a {
`transform : rotate(20deg) ;
`
`div.b {
`transform : skewY(20deg) ;
`
`div.c {
`transform : scal eY(l. 5) ;
`
`Try it Yourself •
`
`Definition and Usage
`
`The trans form property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
`
`Show demo>
`
`Default value:
`
`Inherited:
`
`Animatable:
`
`Version:
`
`none
`
`no
`
`yes. Bead about animatable
`
`CSS3
`
`JavaScript syntax:
`
`object .style.transform=• rotate (7 deg) •
`
`Browser Support
`
`The numbers in the table specify the first br owser version that fully supports the property.
`
`Numbers followed by - webkit-, -moz-, or -o- specify the first version that worked with a prefix.
`
`Try it
`
`Try it
`
`Property
`
`transform ( 2D)
`
`36.0
`4. 0 -webkit-
`
`10.0
`9.0 -ms-
`
`t
`
`16.0
`3. 5 -moz-
`
`9. 0
`3. 2 - webkit -
`
`23.0
`15.0 -webkit-
`10.5 -{)•
`
`https://www.w3schools.com/cssref/css3_ pr_transform.asp
`
`1/5
`
`ACCESSIBE LTD EXHIBIT 1038
`Page 1 of 5
`
`

`

`9/1/22, 12:19 PM
`
`transform (3D)
`
`l 12.0
`
`CSS transform property
`
`10.0
`
`1
`
`9. 0
`4. 0 -webkit-
`
`1
`
`l 23.0
`
`15.0 -webkit-
`
`36.0
`12 .0 -webkit-
`
`ADVERTISEMENT
`
`Syntax
`
`transform: none I transform-functions I initial I inherit;
`
`Property Values
`
`Value
`
`none
`
`Description
`
`Demo
`
`Defines that there shou Id be no transformation
`
`matrix(n,n,n,n,n,n)
`
`Defines a 2D transformation, using a matrix of six values
`
`matrix3d
`(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
`
`Defines a 3D transformation, using a 4x4 matrix of 16 values
`
`translate(x,y)
`
`translate3d(x, y,z)
`
`translateX(x)
`
`translateY(y)
`
`translateZ(z)
`
`scale(x,y)
`
`scale3d(x,y,z)
`
`scaleX(x)
`
`scaleY(y)
`
`scaleZ(z)
`
`Defines a 2D translation
`
`Defines a 3D translation
`
`Defines a translation, using only the value for the X-axis
`
`Defines a translation, using only the value for the Y-axis
`
`Defines a 3D translation, using only the value for the Z-axis
`
`Defines a 2D scale transformation
`
`Defines a 3D scale transformation
`
`Defines a scale transformation by giving a value for the X-axis
`
`Defines a scale transformation by giving a value for the Y-axis
`
`Defines a 3D scale transformation by giving a value for the Z-axis
`
`rotate(ang/e)
`
`Defines a 2D rotation, the angle is specified in the parameter
`
`rotate3d(x,y,z,ang/e)
`
`Defines a 3D rotation
`
`rotateX(ang/e)
`
`rotateY(ang/e)
`
`rotateZ(ang/e)
`
`Defines a 3D rotation along the X-axis
`
`Defines a 3D rotation along the Y-axis
`
`Defines a 3D rotation along the Z-axis
`
`skew(x-angle, y-angle)
`
`Defines a 2D skew transformation along the X- and the Y-axis
`
`skewX(ang/e)
`
`skewY(ang/e)
`
`perspective(n)
`
`Defines a 2D skew transformation along the X-axis
`
`Defines a 2D skew transformation along the Y-axis
`
`Defines a perspective view for a 3D transformed element
`
`Demo>
`
`Demo}
`
`Demo}
`
`Demo>
`
`Demo}
`
`Demo}
`
`Demo>
`
`Demo}
`
`Demo>
`
`Demo>
`
`https://www.w3schools.com/cssref/css3_ pr_transform.asp
`
`2/5
`
`ACCESSIBE LTD EXHIBIT 1038
`Page 2 of 5
`
`

`

`9/1/22, 12:19 PM
`
`initial
`
`inherit
`
`Sets this property to its default value. Read about initial
`
`CSS transform property
`
`Inherits this property from its parent element. Read about inherit
`
`More Examples
`
`Images thrown on the table
`This example demonstrates how to create "polaroid" pictures and rotate the pictures.
`
`Related Pages
`
`CSS tutorial: CSS 2D Transforms
`
`CSS tutorial: CSS 3D Transforms
`
`HTML DOM reference: transform ll!:QRfil1Y.
`
`<Previous I
`
`Complete •CSS Reference
`
`ADVERTISEMENT
`
`"""
`
`We just launched
`W3Schools videos
`
`Explore now
`
`https://www.w3schools.com/cssref/css3_ pr_transform.asp
`
`3/5
`
`ACCESSIBE LTD EXHIBIT 1038
`Page 3 of 5
`
`

`

`9/1/22, 12:19 PM
`
`CSS transform property
`
`COLOR PICKER
`
`Get certified
`by completing
`a css
`course today!
`
`Get started
`
`CODE GAME
`
`Play Game
`
`ADVERTISEMENT
`
`https://www.w3schools.com/cssref/css3_ pr_transform.asp
`
`4/5
`
`ACCESSIBE LTD EXHIBIT 1038
`Page 4 of 5
`
`

`

`9/1/22, 12:19 PM
`
`CSS transform property
`
`ADVERTISEMENT
`
`ADVERT ISEMENT
`
`Report Error
`
`Spaces
`
`Pro
`
`Buy Certificate
`
`Top Tutorials
`
`HTML Tutorial
`CSS TUtor1al
`JavaScript Tutorial
`How To TUtorial
`SQL Tutorial
`Python Tut orial
`W3.CSS Tuto rial
`Bootstrap Tutorial
`PHP Tuto rial
`Java Tutorial
`c++ Tutorial
`JQuery Tutor la I
`
`Top Examples
`
`HTML Examples
`CSS Examples
`lavaS<:rlpt Examples
`How To Examples
`SQL Examples
`Python Examples
`WJ.CSS Examples
`Bootstrap Examples
`PHP Examples
`lava Examples
`XML Examples
`jQuery Examples
`
`Top References
`
`HTML Reference
`CSS Reference
`JavaScript Reference
`SQL Reference
`Python Reference
`WJ.CSS Refereoce
`Bootstrap Reference
`PHP Reference
`HTML Colors
`Java Refer ence
`Angular Reference
`jQuery Reference
`
`Get Certified
`
`HTML Certificate
`CSS Certlflcate
`JavaScript Certificate
`Front End Certlflcate
`SQL Certificate
`Python Certlflcate
`PHP Certificate
`jQuery Certlflcate
`lava Certificate
`c+ + Certificate
`C# Certlflcat e
`XML Certlflcat e
`
`W3Schools 1s optimized for learning and training, Examples might be simplified to improve reading and lea ming, Tutonals, references, and examples are constantly reviewed to avoid errors,
`but we cannot w.eirront full correctness of ell content. White using W3Se:hools, you agree to h21ve read tind oe:cepted our terms of use, cookie ond prlvtiey polley.
`
`FORUM I ABOUT
`
`copyright 1999~2022 by Refsnes Data. All Rights ReseNed.
`W3Schools is Powered by W3.CSS.
`
`V\3
`
`schools
`
`https://www.w3schools.com/cssref/css3_ pr_transform.asp
`
`5/5
`
`ACCESSIBE LTD EXHIBIT 1038
`Page 5 of 5
`
`