More than 5 years have passed since last update.

CSS3-2 線性轉換：位移、縮放、旋轉、歪斜 By 彭彭

網頁前端工程進階

Posted at 2018-08-23

CSS3 線性轉換：位移、縮放、旋轉、歪斜
transform:translate(400px,30px) rotate(45deg);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>CSS3 線性轉換：位移、縮放、旋轉、歪斜</title>
    <style type="text/css">
	.box{
	width:100px;height:100px;background-color:pink;
	/*
		transform:translate(100px,30px);
		transform:scale(1.5,0.5);
		transform:rotate(45deg);
		transform:skew(-45deg,0deg);
	*/
	/* 位移載旋轉 */
	transform:translate(400px,30px) rotate(45deg);
	}
	
	/* cube */
	.cube>.top{
		width:240px;height:60px;background-color:#dddddd;
		transform:skew(-45deg,0deg) translate(30px,0px);
	}
	.cube>.center{
		width:240px;height:240px;background-color:#aaaaaa;
		display:inline-block;
	}	
	.cube>.right{	
		width:60px;height:240px;background-color:#888888;
		display:inline-block;
		transform:skew(0deg,-45deg) translate(0px,-30px);
	}
    </style>
</head> 
<body>
    <div class="box">florence</div>
	>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>lifangti cube
	<div class="cube">
		<div class="top">top</div>
		<div class="center">center</div><div class="right">right</div>
	</div>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up