CSS正方体背面不可见


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			body{
				/*搭建3D环境*/
				transform-style:preserve-3d;
				/*景深 近大远小*/
				perspective: 900px;
			}
			.box{
				width: 300px;
				height: 250px;
				border:4px solid #f00;
				margin: 200px auto;
				transition:1s;
				position:relative;
				transform:rotateY(30deg);
				/*搭建3D环境*/
				transform-style:preserve-3d;
			}
			/*.box img{
				width: 100%;
				height: 100%;
				display:block;
				position:absolute;
				transition:1s;*/
				/*旋转之后展示的是背面 背面不可见*/
				/*backface-visibility:hidden;*/
			/*}*/
			.txt1{
				width: 300px;
				height: 250px;
				background: rgba(0,0,0,0.5);
				font-size:40px;
				line-height:200px;
				text-align:center;
				/*transform:rotateY(180deg);*/
				transition:1s;
				position:absolute;
				/*背面不可见*/
				backface-visibility:hidden;
			}
			.txt2{
				width: 300px;
				height: 250px;
				background: rgba(0,0,0,0.5);
				font-size:40px;
				line-height:200px;
				text-align:center;
				transform:rotateY(180deg);
				transition:1s;
				position:absolute;
				/*背面不可见*/
				backface-visibility:hidden;
			}
			/*.box:hover img{
				transform:rotateY(180deg);
			}*/
			
			.box:hover .txt1{
				transform:rotateY(180deg);
			}
			.box:hover .txt2{
				transform:rotateY(360deg);
			}
		style>
	head>
	<body>
		
		<div class="box">
			
			<p class='txt1'>111p>
			<p class='txt2'>222p>
		div>
			
	body>
html>
		
			
		

你可能感兴趣的:(笔记)