Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

what is 3d transformation in css


CSS 3D Transforms:-


CSS also supports 3D transformations.

Code

Code


3D Transforms Methods:-

transform property you can be use in the following 3D transformation methods:

  • rotateX()
  • rotateY()
  • rotateZ()

    • rotateX() Method:-

    The rotateX() method rotating the element around its X-axis at a given degree: 

    <style>
div {
  width: 300px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}

#code {
  transform: rotateX(150deg);
}
</style>

<h1>Code family</h1>
<p> We are Code family.</p>

<div>
We are Code family.
</div>

<div id="code">
We are Code family..
</div>


    rotateY() Method:-

    The rotateY() method rotating the element around its Y-axis at a given degree:

    <style>
div {
  width: 300px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}

#code {
  transform: rotateY(150deg);
}
</style>


<h1>Code family</h1>
<p>We are Code family.</p>

<div>
We are Code family.
</div>

<div id="code">
We are Code family.
</div>

    rotateZ() Method:-

    The rotateZ() method rotates an element around its Z-axis at a given degree:

    <style>
div {
  width: 300px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}

#code {
  transform: rotateZ(90deg);
}
</style>

<h1>Code Family.</h1>
<p>Code Family..</p>

<div>
Code Family..
</div>

<div id="code">
Code Family..
</div>

    More Topics