03 CSS3 2D

CSS3 2D转换

**转换(transform)**是CSS3中具有颠覆性的特征之一, 可以实现元素的唯一, 旋转, 缩放等特效效果
转换(transform)可以简单理解为变形

• 移动: translate
• 旋转: rotate
• 缩放: scale

1) 2D转换之移动translate

2D移动是2D转换里面的一种功能, 可以改变元素在页面中的位置, 类似定位
语法:
transform: translate(x, y); 或者分开写 -> transform: translateX(n) translateY(n);
transform: translateX(n);
transform: translateY(n);
重点

• 定义2D转换中的移动, 沿着X和Y轴移动元素
• translate最大的优点: 不会影响到其他元素的位置
• translate中百分比单位是相对于自身元素的translate: (50%, 50%);
• 对行内标签没有效果

2) 2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
语法:
transform: rotate(度数)
重点:

• rotate里面跟度数, 单位是deg 比如rotate(45deg)
• 角度为正时, 顺时针, 负时, 为逆时针
• 默认旋转的中心点是元素的中心点

3) 2D转换中心点(transform-origin)

我们可以设置元素转换的中心点
语法:
transform-origin: x y;
重点:

• 注意后面的参数x和y是用空格隔开
• x y默认转换的中心点是元素的中心点(50% 50%)
• 还可以给x y设置像素px或者方位名词(top bottom left right center)

测试后结论:

• translate和rotate同时用在某元素时,会出现中心点错误问题
  需要改成:

transform: translate(-50%, -50%) rotate(45deg);

• 我们如果有移动或者其他样式, 必须先写我们的移动
  

.box3 {
    width: 200px;
    height: 200px;
    background-color: pink;
    transition: all .5s;
    transform-origin: right center;
}
.box3:hover {
    transform: rotate(360deg);
}

测试程序

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px auto;
    }
    .box1::before {
        content: 'aa';
        /* before属于行内元素 */
        display: block;
        width: 100%;
        height: 100%;
        background-color: lightblue;
        transform: rotate(90deg);
        transform-origin: left bottom;
        transition: all .5s;
    }
    .box1:hover::before {
        transform: rotate(0deg);
    }
</style>
<div class="box1">
</div>

4) 2D转换之缩放scale

缩放. 顾名思义, 可以放大和缩小. 只要给元素添加上了这个属性就能控制它放大还是缩小
语法:
transform: scale(x, y);
注意:

• 注意其中的x和y用逗号分隔
• transform: scale(1, 1): 宽和高都放大一倍, 相对于没有放大
• transform: scale(2, 2): 宽和高都放大了2倍
• transform: scale(2): 只写一个参数, 第二个参数则和第一个参数一样, 相当于scale(2, 2)
• transform: scale(0.5, 0.5): 缩小
• scale缩放最大优势: 可以设置转换中心点缩放, 默认中心点缩放的, 而且不影响其他盒子(不脱标)