<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2D变换</title>
<style type="text/css">
.redDiv{
width: 200px;
height: 200px;
background-color: red;
margin-left: 100px;
transition: all 1s;
/*trandform:2D变换用得都是transform；
rotate：旋转，可以给角度，
可以是负数*/
/*transform: rotate(45deg);
margin: 100px auto;*/
/*translate 就是平移，平移的时候不会影响其他元素的位置（在文档流的位置不变，只是视觉上面会出现偏移）*/
/*transform: translate(0px,100px);*/
/*scale 缩放，缩放的时候，默认值是从中心向两边缩放，
也不影响其他元素*/
/*transform: scale(2);*/
/*skew 倾斜
倾斜的时候，会让文字也跟着倾斜，可以给文字嵌套块级标签，通过反倾斜（倾斜给负数）
来让文字变正*/
/*transform: skewX(30deg);*/
}
/*p{
transform: skewX(-30deg);
}*/
.redDiv:hover{
/*transform-origin 可以修改变换的原点。（以那个个点为轴心去旋转）
可以设置英文字母 left top
可以设置像素 100px 0px
可以设置百分比 50% 0
修改原点对于
平移没作用
对缩放、旋转、倾斜有作用*/
transform-origin: 300px 100px;
transform: skew(50deg);
}
</style>
</head>
<body>
<div class="redDiv"><p>123</p></div>
</body>
</html>
网友评论