nickspacek/3D bug.html

## 3D bug.html
<!DOCTYPE html>
<html>
<head>
<style>
        .parent {
                width: 300px;
                height: 300px;
                margin-bottom: 10px;
                position: relative;
                -webkit-perspective: 600;

                -webkit-transition: 1s opacity ease-in-out;
                border: 10px solid black;
        }

        .parent:active {
                opacity: 0;
        }

        .front, .back {
                width: 100%;
                height: 100%;

                position: absolute;

                -webkit-transition: .5s all ease-in-out;
                -webkit-backface-visibility: hidden;
        }

        .front {
                background-color: red;

                -webkit-transform: rotateY(0deg);
        }

        .back {
                background-color: green;

                -webkit-transform: rotateY(-180deg);
        }

        .parent:hover .front {
                -webkit-transform: rotateY(180deg);
        }

        .parent:hover .back {
                -webkit-transform: rotateY(0deg);
        }

        .translate {
                -webkit-transform: translate3d(120px, 120px, 400px);
        }

</style>
</head>

<body>
        <h1>Fade + Flip test</h1>

        <p>Click + hold the divs below to fade them out</p>
        <p>
                When you try this on the first box, it will immediately disappear; there is
                a problem fading an element that contains children that have 3D styles
                applied (that is just a theory)
        </p>

        <div class="parent">
                <div class="front">
                        <p>This child starts facing forward</p>
                        <p>Mouse over to flip me over</p>
                </div>

                <div class="back">
                        <p>This child starts facing backward</p>
                        <p>Mouse off to flip me over</p>
                </div>
        </div>

        <div class="parent">
                <p>this one has no children</p>
        </div>

        <div class="parent">
                <div class="translate">Translated</div>
        </div>

</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.parent {
	width: 300px;
	height: 300px;
	margin-bottom: 10px;
	position: relative;
	-webkit-perspective: 600;

	-webkit-transition: 1s opacity ease-in-out;
	border: 10px solid black;
	}

	.parent:active {
	opacity: 0;
	}

	.front, .back {
	width: 100%;
	height: 100%;

	position: absolute;

	-webkit-transition: .5s all ease-in-out;
	-webkit-backface-visibility: hidden;
	}

	.front {
	background-color: red;

	-webkit-transform: rotateY(0deg);
	}

	.back {
	background-color: green;

	-webkit-transform: rotateY(-180deg);
	}

	.parent:hover .front {
	-webkit-transform: rotateY(180deg);
	}

	.parent:hover .back {
	-webkit-transform: rotateY(0deg);
	}

	.translate {
	-webkit-transform: translate3d(120px, 120px, 400px);
	}

	</style>
	</head>

	<body>
	<h1>Fade + Flip test</h1>

	<p>Click + hold the divs below to fade them out</p>
	<p>
	When you try this on the first box, it will immediately disappear; there is
	a problem fading an element that contains children that have 3D styles
	applied (that is just a theory)
	</p>

	<div class="parent">
	<div class="front">
	<p>This child starts facing forward</p>
	<p>Mouse over to flip me over</p>
	</div>

	<div class="back">
	<p>This child starts facing backward</p>
	<p>Mouse off to flip me over</p>
	</div>
	</div>

	<div class="parent">
	<p>this one has no children</p>
	</div>

	<div class="parent">
	<div class="translate">Translated</div>
	</div>

	</body>

	</html>