Introduction

The Perspective Origin property is a property of CSS3. Which is used to define where a 3D element is based on the axis (x and y-axis). This property is only supported by Google Chrome and Safari ( With the help of (webkit-perspective-origin property). When we define the property on any element its child elements are effected, the element has not affected by this, in my case, I define this property in div1 but it can affect both div2 and div3. This property only affects the 3D transformed elements.
Ex:
  1. <html>
  3. <head>
  4. <style type="text/css">
  5. #div1
  6. {
  7. position: relative;
  8. height: 150px;
  9. width: 150px;
  10. padding: 15px;
  11. margin: 45px;
  12. border: 2px solid Red;
  13. perspective: 150;
  14. perspective-origin: 10% 10%;
  15. -webkit-perspective: 150;
  16. /* For Google Chrome and Safari */
  17. -webkit-perspective-origin: 10% 10%;
  18. /* For Google Chrome and Safari */
  19. }
  22. #div2
  23. {
  24. padding: 50px;
  25. position: absolute;
  26. border: 2px solid black;
  27. background-color: Brown;
  28. transform: rotateY(40deg);
  29. -webkit-transform: rotateY(40deg);
  30. /* For Google Chrome and Safari */
  31. }
  33. #div3
  34. {
  35. padding: 150px;
  36. position: absolute;
  37. border: 1px solid black;
  38. background-color: Blue;
  39. transform: rotateY(40deg);
  40. -webkit-transform: rotateY(40deg);
  41. /* For Google Chrome and Safari */
  42. }
  43. </style>
  44. </head>
  46. <body>
  47. <div id="div1">
  48. <div id="div2">Mahak</div>
  49. <div id="div3">Mahak</div>
  50. </div>
  51. </body>
  53. </html>
The output will be:
1.png