如何制作3D三角金字塔？

Question

为了对这个三角形执行动画，我需要精确地制作这个Pyramid-triangle，因为我的X线旋转，所以它变得非常具有挑战性，但我应该用Y线旋转它，基本上它应该旋转或者翻到右边。我的主要目标是让它看起来像3D，如何实现这一目标？或者还有其他一些方法可以做到这一点？

运行代码段，请帮我解决问题？

.triangle-pyramid {
	transition-property: transform;
	transition: 0.6s;
}
.triangle-pyramid:hover {
	content:'';
	position:absolute;
	width:inherit;
	height:inherit;
	top:50px;
	left:-25px;               
	-webkit-transform-origin: 50% 0% 0;
	-moz-transform-origin: 50% 0% 0;
	-webkit-transform:rotate3d(1,0,0,-120deg);
	-moz-transform:rotate3d(1,0,0,-120deg);
	border:1px solid rgb(147,81,166,.5);
	display: block;
}

 <div>
   <img class="triangle-pyramid" src="https://i.stack.imgur.com/J1NxO.png" alt="objectives SMM" >
</div>