CSS正方体背面不可见

<!DOCTYPE html>
<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>
		<!--
			backface-visibility:背面不可见;
				visible	可见
				hidden	不可见
				
		-->
		<div class="box">
			<!--<img src="img/2.png" alt="" />-->
			<p class='txt1'>111</p>
			<p class='txt2'>222</p>
		</div>
		<!--
			1: 图面默认在前面展示(初始不需要设置背面不可见)
				鼠标移上去,图片旋转到背面,设置背面不可见
				
			2: 文本默认在后面(初始旋转180deg)
				鼠标移上去,文字旋转到正面
			-->	
	</body>
</html>
weixin_46421045
发布了40 篇原创文章 · 获赞 1 · 访问量 1137
私信关注
CSS正方体背面不可见

猜你喜欢
