移動端上上（transform-translateZ註冊）

貴哥的程式設計之路（基礎很重要）。發表於2020-09-29
ORM
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;list-style: none;}
		#div1
		{
			width: 200px;height: 200px;background: black;
			position: absolute;left: 50%;top: 50%;margin: -100px 0 0 -100px;
			transform-style: preserve-3d;
			transform: perspective(800px);
			transition: 1s;

		}
		#div1>#div2
		{
			width: 100%;height: 100%;background: green;position: absolute;
			transform: translateZ(1px);/*3d變換中的移動，z中的正方向面向使用者,值越大，越靠近使用者。*/
		}
		#div1>#div3
		{
			width: 100%;
			height: 100%;background: green;position: absolute;
			transform:scaleX(-1) translateZ(-1px);
			/*scaleX(-1)負數代表映象*/
		}
	</style>
</head>
<body>
	<script type="text/javascript">
		window.onload=function()
		{
		var btn1=document.getElementById("btn1");
		var btn2=document.getElementById("btn2");
		btn1.onclick=function()
		{
			div1.style.transform='rotateY(180deg)';
		}
		btn2.onclick=function()
		{
			div1.style.transform="rotateY(180deg) translateY(-500px)";
			div1.style.opacity=0;
		}

	}
	</script>
	<div id="div1">
		<div id="div2">
			<input type="button" value="我想註冊" id="btn1">
		</div>
		<div id="div3">
			使用者名稱:
			<input type="text"><br>
			密碼:<input type="password" name="" id="">
			<input type="button" value="提交" id="btn2">
		</div>
	</div>
</body>
</html>

相關文章