css-transform-origin

HTML

<div class="content box1">
  <h4>Lorem ipsum dolor sit amet</h4>
  <p>
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>

<div class="content box2">
  <h4>Duis aute irure dolor</h4><img src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content box3">
  <h4>consectetur adipiscing elit</h4>
  <p>
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>

<div class="ram">
<h1>
satya
</h1>
</div>

CSS

.content {
  width: 200px;
  height: 200px;
  background: #fff;
  display: block;
  float: left;
  margin: 0.5em 1.5em;
  border: 1px solid #39464E
}

h4 {
  text-align: center;
  background: #ccc;
}

p {
  padding: 5px;
}

img {
  width: 100%
}

.box1 {
  transform: skew(-10deg, -5deg);
  transform-origin: bottom left;
}

.box2 {
  transform: rotate(12deg);
  transform-origin:10px 30px;
}
.box3 {
  transform: scale(.8);
 transform-origin:50px 30px;
}

.box1:before{content:"box 1"; display:block; background:#f9f393; font-weight:bold; text-align:center}
.box2:before{content:"box 2"; display:block; background:#f9f393; font-weight:bold; text-align:center}
.box3:before{content:"box 3"; display:block; background:#f9f393; font-weight:bold; text-align:center}
.ram:before{content:""; background-color:red;color:white;padding:px}