transform rotate

by Tamsen Pozzolo

HTML

<div class="p" id="parenta">
<div class="c">
<img class="i" id="imagea" src="https://www.gravatar.com/avatar/7d186a5fccd16492b88ca51adfd56d95?s=64" width="32" height="32">
</div>
</div>

CSS

:root {
  --color-1: #252324;
  --color-2: #ff2c82;
  --color-3: #eaf7df;
  --color-4: #72efd9;
}

body {
  background: linear-gradient(90deg, var(--color-1) 0%, var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%, var(--color-4) 100%);
}.p{
  display: block;
  width: 150px;
  height: 150px;
  background-color: pink;
  
  display: table-cell;
  vertical-align: middle;
  
  border-radius: 20px;
  
  transform: translate(80px, 70px) rotate(-24deg);
}

.c {
  margin: auto;
  display: block;
  width: 0;
  height: 0;
}

.i {
  border-radius: 2px;
  
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(24deg);
}

JavaScript

const p = document.getElementById("parenta");
const i = document.getElementById("imagea");

var t = 0.0;

function step() {

	var a = t * 10;
  
	p.style.transform = "translate(80px, 70px) rotate(" + -a + "deg)";  
  i.style.transform = "translate(-50%, -50%) rotate(" + a + "deg) scale(4)";

  window.requestAnimationFrame(step);

	t += 0.016;
}


window.requestAnimationFrame(step);