transition过渡属性

一、过渡属性

过渡属性 `transition` 是实现css动效的属性。

transition: 属性名称 动画持续时间 运动曲线 延迟时间;

我们可以来写一下代码：

div{

    width: 200px;

    height: 200px;

    background: skyblue;

    transition: height 2s linear 1s;

}

div:hover{

    height: 300px;

}

如何单独控制transition的某个属性值：

transition-property

transition-duration

transition-timing-function

transition-delay

如果我们鼠标移上元素，想要有多个属性，如宽、高和背景都同时改变，显然 `transition-property` 的值，就不能只写一个属性的名称，而该写 `all`，如：

transition: all 2s linear;

**补充**

多值写法:

transition: height 2s linear, background 1s linear;

 二、转换属性

转换属性 `transform` 可将元素进行旋转、位移和缩放等转换。

#### 旋转Rotate

transform: rotateX() rotateY() rotateZ();

值与值之间以空格隔开，单位为deg。

#### 位移Translate

transform: translateX() translateY() translateZ();

值与值之间以空格隔开，单位为px。

#### 缩放Scale

transform: scaleX() scaleY() scaleZ();

值为数值，值与值之间以空格隔开，无单位。

#### translate实现未知宽高的盒子居中

https://blog.csdn.net/mr_fzz/article/details/53081452

三、**旋转中心点和旋转轴**

我们可以通过  transform-origin 这个属性配合旋转来控制元素的旋转中心点和旋转轴。

配合Transform:rotate()做旋转中心点的设置，两个值，单位可以是px  %

参考的点是元素的左上角（px）

写%参考点是元素宽度和高度

配合Transform:rotateY()/rotateX()做旋转轴的设置。

值可以只写一个方向词：left/right/center/top/bottom

<!--旋转轴案例-->

<style>

    div{

        margin:100px auto;

        width: 200px;

        height: 200px;

        border: 1px solid #000;

    }

    img{

        transition: all .6s;

        transform-origin:right;

    }

    div:hover img{

        transform: rotateY(180deg);

    }

</style>

<div><img src="images/shn.jpg" alt=""></div>