translate3d() Archives - scmGalaxy https://www.scmgalaxy.com/tutorials/tag/translate3d/ A Platform for Software Engineers Wed, 13 Apr 2022 16:34:30 +0000 en-US hourly 1 https://wordpress.org/?v=7.1 How to use 3d transform property in CSS? https://www.scmgalaxy.com/tutorials/how-to-use-3d-transform-property-in-css/ https://www.scmgalaxy.com/tutorials/how-to-use-3d-transform-property-in-css/#respond Thu, 12 Aug 2021 13:06:48 +0000 https://www.scmgalaxy.com/tutorials/?p=7855 This property is used to apply a 2D or 3D transformation to an element. We can set below values: – […]

The post How to use 3d transform property in CSS? appeared first on scmGalaxy.

]]> This property is used to apply a 2D or 3D transformation to an element. We can set below values: –

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()
  • translate3d()
  • rotate3d()
  • scale3d()
  • matrix3d()
  • perspective()

3D Transform–

  • transform
  • transform-origin
  • transform-style
  • perspective
  • perspective-origin
  • backface-visibility

translate3d( )–

Syntax: –

transform: translateX(px)
transform: translateY(px)
transform: translateZ(px)
transform: translate3d(Xpx, Ypx, Zpx)

Ex: –

transform: translateX(10px)
transform: translateY(5px)
transform: translate3d(10px, 5px, 20px)

rotate3d( )–

Syntax: –

transform: rotateX(deg)
transform: rotateY(deg)
transform: rotateZ(deg)
transform: rotate3d(Xdeg, Ydeg, Zdeg, Angledeg)

Ex: –

transform: rotateX(50deg)
transform: rotateY(40deg)
transform: rotateZ(20deg)
transform: rotate3d(50deg, 50deg, 50deg, 60deg)

scale3d( )–

Syntax: –

transform: scaleX(x)
transform: scaleY(y)
transform: scaleZ(z)
transform: scale3d(x, y, z)

Ex:-

transform: scaleX(3)
transform: scaleY(4)
transform: scaleZ(5)
transform: scale3d(3, 4, 5)

matrix()–

Syntax: –

transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Ex:-

transform:

The post How to use 3d transform property in CSS? appeared first on scmGalaxy.

]]> https://www.scmgalaxy.com/tutorials/how-to-use-3d-transform-property-in-css/feed/ 0