css3元素变化讲解

时间：6年前阅读：4620

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
	*{    
		padding: 0;    
		margin: 0;    
	}    
	#jhreh{    
		width: 60px;    
		height: 600px;    
		border: 2px solid black;    
		margin: 10px auto;    
		/*transform变换  rotate旋转  30deg 角度*/    
		/*transform: rotate(30deg);*/    
		/*translate  平移    让元素相对于现在的位置进行平移  向右移100，向下移50,*/    
		/*transform: translate(100px,50px);*/    
		/*整体缩放效果  scale 比例   宽度原来的1.8倍，高度0.6倍*/    
		/*transform:  scale(1.8,0.6);*/    
		/*扭曲效果    skew  斜的*/    
		transform: skew(30deg,0);    
	}    
	#jhreh div:nth-child(1){    
		width: 60px;    
		height: 100px;    
		background: yellow;    
	}    
	#jhreh div:nth-child(2){    
		width: 60px;    
		height: 370px;    
		background: red;    
		color: yellow;    
		font-size: 30px;    
		font-family: "微软雅黑";    
		text-align: center;    
		padding-top:30px;    
	}    
	#jhreh div:nth-child(3){    
		width: 60px;    
		height: 100px;    
		background: yellow;    
	}    
	</style>    
</head>    
<body>    
	<div id="jhreh">    
	<div></div>    
	<div>如意金箍棒</div>    
	<div></div>    
	</div>    
</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3元素变化讲解

网友评论