Why doesn't perspective property work for my element?

Question

I've established perspective and rotateY(60deg)to my parent element. But this one looks like it's not in 3D space. What's wrong? Thanks

.parent {
  width: 300px;
  height: 300px;
  background: yellowgreen;
  transform-style: preserve-3d;
  transform: rotateY(60deg) perspective(200px);
}

.child {
  width: 100px;
  height: 100px;
  background: yellow;
  transform: rotateX(45deg);
}

<div class="parent">
  <div class="child"></div>
</div>