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;
}
效果图: