layout/reftests/transform-3d/backface-visibility-2.html

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/layout/reftests/transform-3d/backface-visibility-2.html	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,45 @@
     1.4 +<!DOCTYPE html>
     1.5 +<html>
     1.6 +<body>
     1.7 +	<style>
     1.8 +	#container {
     1.9 +		position: relative;
    1.10 +		margin: 10px auto;
    1.11 +		width: 450px;
    1.12 +		height: 281px;
    1.13 +		z-index: 1;
    1.14 +		-moz-perspective: 1000px;
    1.15 +	}
    1.16 +	#card {
    1.17 +		width: 100%;
    1.18 +		height: 100%;
    1.19 +		-moz-transform-style: preserve-3d;
    1.20 +        -moz-transform: rotateY(165deg);
    1.21 +	}
    1.22 +	.face {
    1.23 +		position: absolute;
    1.24 +		width: 100%;
    1.25 +		height: 100%;
    1.26 +        -moz-backface-visibility: hidden;
    1.27 +        background: red;
    1.28 +	}
    1.29 +	.face.back {
    1.30 +		display: block;
    1.31 +		-moz-transform: rotateY(180deg);
    1.32 +		box-sizing: border-box;
    1.33 +		padding: 10px;
    1.34 +		color: white;
    1.35 +		text-align: center;
    1.36 +		background: green;
    1.37 +	}
    1.38 +	</style>
    1.39 +	
    1.40 +	<div id="container" class="hover">
    1.41 +		<div id="card">
    1.42 +			<div class="front face">
    1.43 +			</div>
    1.44 +			<div class="back face">
    1.45 +			</div>
    1.46 +  		</div>
    1.47 +    </div>
    1.48 +</body></html>

mercurial