Categories
CSS Web development

CSS 3D Transforms

CSS also supports 3D transformations by using CSS transform property.

CSS 3d transforms

With the CSS transform property you can use the following 3D transformation methods:

  1. rotateX()
  2. rotateY()
  3. rotateZ()

RotateX()

The rotateX method rotates an element around its X-axis at a given degree:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: lightpink;
  border: 1px solid blue;
}

#myDiv {
  transform: rotateX(150deg);
}
</style>
</head>
<body>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

Output:

RotateY()

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: lightpink;
  border: 1px solid blue;
}

#myDiv {
  transform: rotateY(150deg);
}
</style>
</head>
<body>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

Output:

RotateZ()

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: lightpink;
  border: 1px solid blue;
}

#myDiv {
  transform: rotateZ(90deg);
}
</style>
</head>
<body>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 90 degrees.
</div>

</body>
</html>

Output:

Using CSS 3d transform property we can create the card flip:

To see the live output click here.

To create a card flip we’ll use the transform rotateY() method (we’ll rotate the element about 180 degrees).

Add HTML:

<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="your image.jpg" alt="Pic" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Lena Stanley</h1> 
      <p>Flip card example</p>
      <p>Hope you find this helpful!</p> 
    </div>
  </div>
</div>

and ddd following CSS:

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

To see the live output visit: lenastanley.com.

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *