7.31 CSS-2D效果 - 技术栈

平移

语法：translate(X,Y)，既可以为正值，也可以为负值（向下、向右为正方向）

注意：尽量不要对元素本身设置当前这个属性，否则图片会一直跳，原因：悬浮时图片的位置发生了改变

案例一：鼠标悬浮向右平移元素

HTML 复制代码

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        transform: translate(300px,0);
    }
</style>
<button>鼠标悬浮</button>
<div></div>

旋转

语法：transform:rotate(角度) 角度：单位deg 正值：顺时针旋转负值：逆时针旋转

注意：inline行级元素是不能直接旋转的

案例一：div旋转360度

HTML 复制代码

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        /* 旋转 */
        transform: rotate(360deg)
    }
</style>
<button>鼠标悬浮</button>
<div></div>

缩放

语法：transform:scale(x,y) x：表示x轴的缩放比例 y：表示y轴的缩放比例 x,y 值分别为原有元素宽高的倍数。 1为不缩放，大于1放大，小于1缩小

当为负值时，将会沿x轴或y轴进行翻转当括号内两个数相同时，可以只写一个值代替。如果只想扩大x轴或者y轴，那么属性为scaleX(n)和scaleY(n) transform-origin 影响变换方向。

案例一：鼠标悬浮放大图片

HTML 复制代码

<style>
    img{
        transition: all 2s;
    }
    button:hover+img{
        /* 旋转 */
        transform: scale(0.5);
    }
</style>
<button>鼠标悬浮</button>
<img src="../images/1.jpg" alt="">

倾斜

语法：transform：skew(x-angle,y-angle)

该元素会以横向（X轴）和垂直（Y轴）为参考确定角度; 如果只想沿x轴或者y轴进行倾斜，那么属性为skewX(n)和skewY(n)

旋转中心点

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。在没有transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、缩放，扭曲等操作都是以元素自己中心位置进行变形。如果实现过渡动画，则变换中心点应该在元素初始CSS

![[71f00a3a-e822-4533-b095-0cace1c627ad.png]]

例一：元素按照左上角的定点旋转

HTML 复制代码

<style>
    img{
        width: 400px;
        /* 过渡效果 
/
        transition: all 2s;
*        /*
 旋转中心点 */
        transform-origin: right bottom;
    }
    img:hover{
        transform: rotate(360deg);

    }
</style>
<img src="../images/0.jpg" alt="">