当前位置:首页 > WEB开发 > HTML/CSS

第24章 CSS3变形成效[下]

优良自学吧提供第24章 CSS3变形成效[下],第24章 CSS3变形效果[下] index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <

第24章 CSS3变形效果[下]

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3变形效果[下]</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="a">
	<img src="img.png">
</div>
111
</body>
</html>

 

style.css

@charset "utf-8";

body {
	margin: 100px;
}

#a {
	perspective: 500px;
	/*perspective-origin: top right;*/
	transform-style: preserve-3d;
}

img {
	/*transform: translate3d(100px, 100px, 300px);*/
	/*transform: translateZ(300px);*/

	/*transform: scale3d(1.5,1.5,2.5) rotateX(45deg);*/
	/*transform: scaleZ(1.5) rotateX(45deg);*/

	/*transform: rotate3d(1,1,1,120deg);*/

	/*transform: rotateX(120deg);*/
	/*transform: rotateY(45deg);*/

	/*transform: perspective(500px) rotateY(45deg);*/
	transform: rotateY(45deg);
}

 

效果图:
第24章 CSS3变形成效[下]
 

 


(本文来自互联网,不代表搜站(http://www.ylzx8.cn/)的观点和立场)
本站所有内容来自互联网,若本站收录的信息无意侵犯了贵司版权,请给我们来信(ylzx8cn@163.com),我们会及时处理和回复,谢谢