css3學習--css3動畫詳解二（3d效果）

時間 2019-12-13

標籤 css3 css 學習動畫詳解 3d 效果欄目 CSS 简体版

原文原文鏈接

一.設置3D場景css

perspective:800 //瀏覽器到物體的距離(像素)
perspective-origin:50% (x軸） 50% （y軸) //視點的位置html

transform-style: preserve-3d;css3

示例：web

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#experiment{
		 -webkit-perspective: 800;
		 -webkit-perspective-origin: 50% 50%;
		 -webkit-transform-style: -webkit-preserve-3d;
	}
	.block{
		width:500px;
		height:500px;
		text-align:center;
		line-height:450px;/*牢記居中用行高 */
		font-size:100px;
		background-color:burlywood;
		margin:100px auto;
		transform:rotatex(45deg);
		/*transform:rotatey(45deg);
		transform:rotatez(45deg);*/
	}
	</style>
</head>
<body>
	<div id="experiment">
		<div class="block">css3</div>
	</div>
</body>
</html>

相關標籤/搜索