css3新特性第六章(2D变换)
css3新特性第五章(2D变换)
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
- 2D位移
- 2D缩放
- 2D旋转
- 2D扭曲
- 多重变换
- 变换原点
一、2D位移
2D 位移可以改变元素的位置，具体使用方式如下：
-
先给元素添加 转换属性 transform
-
编写 transform 的具体值，相关可选值如下：
值 含义 translateX 设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度
的百分比。translateY 设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度
的百分比。translate 一个值代表水平方向，两个值代表：水平和垂直方向。
基本概念
图示：原点从左上角开始，为二维坐标系
translateX
设置水平方向偏移，值为：长度值/百分比 均可
translateX(100px)
代码
.outer {width: 200px;height: 200px;border: 2px solid black;margin: 0 auto;margin-top: 150px;}.inner {width: 200px;height: 200px;background-color: pink;/* 向 x 轴方向移动100个像素 x 轴为 top边 y周围 left边 */transform: translateX(100px);
}<body><div class="outer"><div class="inner">2D位移</div></div>
</body>
translateY
沿着 y轴，也就是上下方向移动
translateY(100px)
代码
.outer {width: 200px;height: 200px;border: 2px solid black;margin: 0 auto;margin-top: 150px;}.inner {width: 200px;height: 200px;background-color: pink;/* 向 y 轴方向移动100个像素 */transform: translateY(100px);
}<body><div class="outer"><div class="inner">2D位移</div></div>
</body>
translateX/translateY同写
两个参数共同写，代表的是同事向 x、y 偏移
translateX(100px) translateY(100px)
代码
/* 同时向 x y 轴移动 写法一 */
transform: translateX(100px) translateY(100px);
translate两个值
/* 同时向 x y 轴移动 写法二 */
transform: translate(100px,100px);
/* 还支持写负值 */
/* transform: translate(-100px,-100px); */
写百分比
参考的是自身的宽高，然后再乘以百分比
/* 支持写百分比 参考的是自生的宽高 */
transform: translate(50%,50%);
只写一个值
/* 如果只写一个值 代表的是 x轴 */
/* transform: translate(50%); */
二、缩放
2D 缩放是指：让元素放大或缩小，具体使用方式如下：
1. 先给元素添加 转换属性 transform
2. 编写 transform 的具体值，相关可选值如下：
| 值 | 含义 |
|---|---|
| scaleX | 设置水平方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小 于 1 缩小。 |
| scaleY | 设置垂直方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小 于 1 缩小。 |
| scale | 同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩 放；两个值分别代表：水平缩放、垂直缩放。 |
-
注意点：
- scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解。
- 借助缩放，可实现小于 12px 的文字。
scaleX
沿着 x 轴缩放(宽度变化) > 1 为放大 小于1位缩小
示列
代码
.outer {width: 200px;height: 200px;border: 2px solid black;margin: 0 auto;margin-top: 150px;font-size: 40px;text-align: center;line-height: 200px;
}.inner {width: 200px;height: 200px;background-color: pink;/* scaleX 沿着 x 轴缩放(宽度变化) > 1 为放大 小于1位缩小*/transform: scaleX(0.5);
}<div class="outer"><div class="inner">2D缩放</div></div>
scaleY
沿着 Y 轴缩放(高度变化) > 1 为放大 小于1位缩小
示列
代码
transform: scaleY(0.5);
宽高同时缩放
我们可以写两个值将 宽高同时进行缩放
写法1
/* 宽高同时缩放 写法1 */
transform: scaleX(0.5) scaleY(0.5);
写法2
transform: scale(2,2);
写法3
可以写一个值，代表的是宽高同时为一个值的比例，如果后续我们想匡高同比例，那么写一个就可以了；
transform: scale(0.9);
三、旋转
2D 旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：
- 先给元素添加 转换属性 transform
- 编写 transform 的具体值，相关可选值如下：
| 值 | 含义 |
|---|---|
| rotate | 设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。 |
rotateZ
旋转是 z 轴 而不是 x y 轴 z轴相当于是从里到外射出来的一条线
效果
代码
.inner {width: 200px;height: 200px;background-color: pink;/* 旋转是 z 轴 而不是 x y 轴 z轴相当于是从里到外射出来的一条线*/transform: rotateZ(30deg);
}
<div class="outer"><div class="inner">2D旋转</div></div>
rotate
rotateZ(20deg) 相当于 rotate(20deg)
效果
代码
transform: rotate(60deg);
写负值和大于360
如果我们写负值的话，那么就是逆时针；
如果大于360度的话，就是 值 - 360 后的顺时针角度
四、2D扭曲
2D 扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际开发几乎不用，了解即可，具体使用方
式如下：
-
先给元素添加 转换属性 transform
-
编写 transform 的具体值，相关可选值如下：
值 含义 skewX 设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯 。 skewY 设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯 。 skew 一个值代表 skewX ，两个值分别代表： skewX 、 skewY
skewX
.inner {
width: 200px;
height: 200px;
background-color: pink;
/* 水平方向 */
transform: skewX(10deg);
skewY
/* y 轴扭曲 */
transform: skewY(10deg);
skew(10deg,10deg)
/* 写法三 1个值代表的是 水平方向 */
transform: skew(10deg,10deg);
五、多重变换
多个变换，可以同时使用一个 transform 来编写。
transform: translate(-50%, -50%) rotate(45deg);
- 实际上就是同时位移 + 缩放 / 旋转，多个配合使用
translate/rotate
/* 先x轴位移 100px y 轴100px 再进行旋转 那么图应该是在右下角旋转 */
transform: translate(100px,100px) rotate(30deg);
rotate/translate
我们先进行旋转，然后再进行位移；
/* 如果我们先旋转 再位移 看效果，旋转是会改变坐标位置 */
transform: rotate(45deg) translate(100px,100px);
scale/translate
先进行缩放，然后再进行位移
/* 先缩放，再位移 缩放也会改变左边位置 */
transform: scale(0.5) translate(100px,100px);
translate/scale
/* 先位移，再缩放 */
transform: translate(100px,100px) scale(0.5) ;
六、变换原点
- 元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。
- 修改变换原点对位移没有影响， 对旋转和缩放会产生影响。
- 如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
- 如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%
translate 位移
我们测试使用位移，看设置原点是否有影响
transform-origin: 50px 50px;
效果
代码
.inner {width: 200px;height: 200px;background-color: pink;/* 位移使用变换原点 我们发现对位移没有影响，位移原点都是相对于定点左上角来计算的 */transform-origin: 50px 50px;transform: translate(50px,50px); }
总结
我们看到使用位移的时候，设置了原点偏移没有作用，也就是说，位移对是否设置原点不影响
scale 缩放
transform-origin: 50px 50px;
transform: scale(0.5);
效果
总结
设置原点对缩放是有影响的，本来是以中小为原点的，目前是按照设置的方式显示
rotate 旋转
.inner {
width: 200px;
height: 200px;
background-color: pink;
transform-origin: 50px 50px;
transform: rotate(30deg);
}
效果
总结
设置原点对旋转是有影响的，一直围绕这 设置点为中心点旋转，我们自己可以打开开发者工具，手动调整角度进行观察
几种写法
我们可以设置 transform-origin 的值为：
- 像素值
- 关键字 (left,top)
- 百分比
- 一个参数和两个参数的区别
写法一
/* 写法1 transform-origin 为一个值 默认 x轴50px 第二个值默认为 50% */
transform-origin: 50px;
transform: rotate(30deg)
写法二
/* 写法2 transform-origin 为一一个关键字 默认 左上角 y轴为居中位置 */
transform-origin: left;
transform: rotate(30deg)
写法三
/写法3 百分比 变换原点在元素中心位置 百分比相对于自身/
transform: 50% 50%;
transform: rotate(30deg);