3：2D装换 [ 重点 ]

 

知识梳理

translate   //1  位移
rotate  　　 //2 旋转  
scale  　　  //3  缩放
transform-origin //4 设置旋转中心

 

 

一  平移 [ translate ] 

div {
    width: 150px;
    height: 100px;
    background: pink;
    transform: translate(20px,20px);
    transform: translateX(20px);/*单独设置X轴的值*/
    transform: translateY(20px);/*单独设置Y轴的值*/
}
<div>我</div>

重点

1 translate最大的优点 不会影响其他元素的位置

2 transform: translate(50%,50%); 百分比参数 是基于元素自身的宽 高的比例

3 translate 对行内元素无效

小demo  [ 子盒子水平垂直居中 ]

定位 + translate 配合使用
<style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background: pink;
        }
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            background: hotpink;
            transform: translate(-50%,-50%);
        }
</style>

//让子盒子垂直居中  水平居中

<div class="father">
    <div class="son"></div>
</div>

  

二 旋转   [ rotate ]

rotate [ˈroʊteɪt]  v.(使)旋转，转动;(工作)由…轮值;(人员)轮换，轮值

让元素在2维平面内顺时针或逆时针旋转

语法：transform：rotate( 旋转的度数 ); 

 使用要点

//1 rotate里面写的是角度，单位是 deg(角度)，例如：rotate(45deg);

//2 角度为正值时，顺时针旋转，为负值时，逆时针旋转

//3 默认旋转的中心点是元素的中心点

 小demo [ 鼠标放上旋转360度 ]

img {
    border-radius: 50%;
    border: slategray 5px solid;
    /*过渡写在本身上 谁做动画给谁加*/
    transition: all 0.3s;
}
    img:hover {
    transform: rotate(360deg);
    cursor: pointer;
}
<img src="img/ym.jpg" alt="">

 小三角 demo

div {
    position: relative;
    margin: 100px auto;
    width: 300px;
    height: 50px;
    border: #666666 solid 1px;
}
div::after {
    position: absolute;
    top: 15px;
    right: 15px;
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    transform: rotate(45deg);
    transition: all 0.3s;
}
鼠标经过div 三角旋转
div:hover::after {
    transform: rotate(225deg);
}
<div></div>

 

三 设置旋转中心点

origin 起源 由来  n. 起源;源头;起因;身世;出身  [ˈɔːrɪdʒɪn]
transform-origin: x轴 y轴;

 使用要点

//1 X轴 和 Y轴 中间用空格分割

//2 默认值 X  Y 都是50%

//3 参数值可以是 数值 百分比 和 方位名词  [top center bottom left right ]

小demo 改变旋转中心点

div {
    margin: 300px auto;
    width: 300px;
    height: 300px;
    background: pink;
    transform-origin: 50px 50px;
    transition: all 1s;
}
div:hover {
    transform: rotate(360deg);
}

 小demo

div {
    overflow: hidden;
    margin: 100px auto;
    width: 100px;
    height: 100px;
    background: #686868;
}
div::after {
    display: block;
    content: "小宝";
    width: 300px;
    height: 300px;
    background: hotpink;
    transform: rotate(180deg);
    transform-origin: left bottom;
    transition: all 0.4s;
}
div:hover::after {
    transform: rotate(0deg);
}
<div></div>

 鼠标经过 粉色盒子右侧慢慢移动到左上角

 

 

四 缩放 scale

scale 比例 缩放   [skeɪl] 

transform: scale(0.5,1);

要点

//1 数值是倍数
//2 数值后面不需要跟单位
//3 等比例缩放 简写一个值就可以 [ 表示 X 和 Y 都是这个值]
//4 数值小于1 就是缩小

优点

//1 不会影响其他的元素
//2 从中心点向四周缩放 [ 最常用 ]
//3 可以设置缩放中心点 transform-origin: left bottom;

 小demo [ 鼠标经过图片放大 ]

div {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
img {
    transition: all 0.3s;
}
img:hover {
    transform: scale(1.1);
}

<div><img src="img/ym.jpg" alt=""></div> 

 小demo  翻页

li {
    float: left;
    list-style: none;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: 10px;
    border: solid 1px #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}
li:hover {
    transform: scale(1.3);
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

实现效果