.frame
{
	width: 200px;
	height: 200px;

	background: yellow;
	opacity: 0.5;

	transition: all 0.75s linear;

	/* включаем поддержку 3d */
	transform-style: preserve-3d;
}

input:checked ~ .frame
{
	transform: rotateY(180deg);
}

.wow
{
	position: absolute;
	top: 50%;
	left: 50%;

	width: 50px;
	height: 50px;

	margin: -25px 0 0 -25px;

/*
	разворачиваем элемент перпендикулярно
	при этомполовина его будет с внутренней
	стороны желтого квадрата
*/
	transform: rotateY(90deg);

	/* можем это "исправить" */
/*	transform-origin: 0 0; */

	box-shadow: 0 0 10px rgba(0,0,0,0.4);

	background: #000;
}