Welcome Guest! (App Version 3.1)

websitnero logo name

3D Transformation

3D Transformations in CSS3

Till the last version of HTML data could only be stored at client side in cookies which had a limit of 4KB. Now, webstorage can also be used to store data on the client side.

Following are the 3 kinds of 3D Transformation:

  • rotateX
  • rotateY
  • rotateZ

rotateX

The following example shows rotateX.

Example

<head>
<style>
  *{margin:0px;padding:0px;}
  div{padding:30px;border:2px solid black;}
  p{width:100px;height:100px;background:red;}
  p.rotateX{transform:rotateX(60deg);}
</style>
</head>

<body>
<div>
  <p>This is a original paragraph.</p>
  <p class="translate">This is transformed paragraph.</p>
</div>
</body>

rotateY

The following example shows rotateY.

Example

<head>
<style>
  *{margin:0px;padding:0px;}
  div{padding:30px;border:2px solid black;}
  p{width:100px;height:100px;background:red;}
  p.rotateY{transform:rotateY(60deg);}
</style>
</head>
<body>
<div>
  <p>This is a original paragraph.</p>
  <p class="translate">This is transformed paragraph.</p>
</div>
</body>

rotateZ

The following example shows rotateZ.

Example

<head>
<style>
  *{margin:0px;padding:0px;}
  div{padding:30px;border:2px solid black;}
  p{width:100px;height:100px;background:red;}
  p.rotateZ{transform:rotateZ(60deg);}
</style>
</head>

<body>
<div>
  <p>This is a original paragraph.</p>
  <p class="translate">This is transformed paragraph.</p>
</div>
</body>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.