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

第24章 CSS3变形成效[上]

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

第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>我是HTML5</div>
111

</body>
</html>

 

style.css

@charset "utf-8";

body {
	margin: 100px;
}

div {
	width: 200px;
	height: 200px;
	background-color: green;
	box-shadow: 2px 2px 2px gray;

	/*平移*/
	/*transform: translate(200px, 200px);*/
	/*transform: translate(0, 200px);*/
	/*transform: translateX(200px);*/
	/*transform: translateY(200px);*/

	/*缩放*/
	/*transform: scale(1.5);*/
	/*transform: scale(0.5);*/
	/*transform: scale(1.5, 2.0);*/
	/*transform: scaleX(0.5);*/
	/*transform: scaleY(0.5);*/

	/*旋转*/
	/*transform: rotate(-45deg);*/

	/*倾斜*/
	/*transform: skew(45deg, 20deg);*/
	/*transform: skewX(45deg);*/
	/*transform: skewY(45deg);*/

	/*通过六个值自定义矩形*/
	/*transform: matrix(1, 0, 0, 1, 30, 30);*/

	/*多个属性值空格隔开*/
	/*transform: rotate(45deg) scale(1.5);*/

	transform: rotate(45deg);

	/*transform-origin: center center;*/
	/*transform-origin: 50% 50%;*/

	/*transform-origin: left top;*/
	transform-origin: 0 0;
}

 

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

 

 


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

最近更新