Html5 3d panels

Date: 2018-09-26 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <title></title>			
	
	<style>
		.test3d_parent
		{
			-webkit-transform-origin: 50% 50%;
			-webkit-transform-style:preserve-3d;
			-webkit-transform: perspective(1000px) translate3d(0,0,-100px);
		}
	
		.test3d
		{
			position:absolute;
			left:100px;
			top:100px;
			width:300px;
			height:200px;
			background-color:red;
			
			-webkit-transform: rotate3d(0,1,0,45deg) translate3d(0,0,100px);
			-webkit-transform-origin: 50% 50%;
			-webkit-transform-style:preserve-3d;
			-webkit-backface-visibility:hidden;
		}
	
		.test3d2
		{
			position:absolute;
			left:100px;
			top:100px;
			width:300px;
			height:200px;
			background-color:green;
			
			-webkit-transform: rotate3d(0,1,0,45deg) translate3d(0,0,100px);
			-webkit-transform-origin: 50% 50%;
			-webkit-transform-style:preserve-3d;
			-webkit-backface-visibility:hidden;
		}
	
	</style>
	
</head>
<body>		

	<div class="test3d_parent"><div class="test3d"></div></div>
	<div class="test3d_parent"><div class="test3d2"></div></div>
</body>
</html>

 

13690cookie-checkHtml5 3d panels