<!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>
2D变换
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 应用：二维离散傅里叶变换是将图像从空间域转至频域，在图像增强、图像去噪、图像边缘检测、图像特征提取、图像压缩等等应...
- ⚠️ rotate 是以原点为中心旋转，Quartz 2D 创建的图形上下文旋转中心为左下角，角度值正数为逆时针旋...
