Welcome Guest! (App Version 3.1)

websitnero logo name

2D Transformation

2D Transformations in CSS3

CSS3 comes with a taste of UI transformations of rather static elements. Now not only the html elements with have heights & widths but also the will show a start point of animations through 2D Transformation.

Following are the 6 kinds of 2D Transformations:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

translate()

The following is the example of translate():

Example

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

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

rotate()

The following is the example of rotate():

Example

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

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

scale()

The following is the example of scale():

Example

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

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

skewX()

The following is the example of skewX():

Example

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

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

skewY()

The following is the example of skewY():

Example

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

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

matrix()

The following is the example of matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()):

Example

<head>
<style>
  *{margin:0px;padding:0px;}
  div{padding:30px;border:2px solid black;}
  p{width:100px;height:100px;background:red;}
  p.matrix{transform:matrix(1.5, 0.3, 0.3, 1.5, 20, 30);}
</style>
</head>

<body>
<div>
  <p>This is a original paragraph.</p>
  <p class="matrix">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.