CSS过渡和二维转换

CSS过渡和二维转换

• 一、过渡

• 二、二维转换

  

一、过渡

  过渡指的是处理一个状态到另一个状态的过程。过渡属性处理了元素从一个样式变为另一个样式的逐渐改变的过程。我们一般使用transition属性去实现过渡效果。

  需要注意的是，过渡与动画不同，过渡只处理一次变化

  transition有以下语法

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	延迟 规定过渡效果何时开始。默认是 0。

  我们可以使用transition-property transition-duration transition-timing-function和transition-delay四个属性分别定义过渡，也可以使用transition直接定义一组过渡效果。

1、transition-property属性

  该属性定义了我们想要使其发生变化的CSS属性，比如背景颜色，高度，不透明度等。

值	描述
none	表示没有任何CSS属性有过渡效果；
all	为默认值，表示所有的CSS属性都有过渡效果；
<property>	指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果。

2、transition-duration属性

  该属性定义了过渡的持续时间，就是发生变化要经历的时间。

  对该属性定义的值为时间，以秒或毫秒计的时间。

3、transition-timing-function属性

  transition-timing-function 属性规定过渡效果的速度曲线。

  该属性允许过渡效果随着时间来改变其速度。

值	描述
linear	以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	过渡的速度先慢，后越来越快，直至结束（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	渡的速度在开始和结束时都很慢（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	自定义贝塞尔曲线的效果，其中的四个参数为从0到1的数字。

4、transition-delay属性

  该属性规定了过渡效果何时开始。也就是延时多久后开始变化。

  该属性的值也是以秒或毫秒记。

  我们来看一个实例

HTML

    <div class="d1"></div>

CSS

    *{
        padding: 0;
        margin: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    .d1{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        margin: 100px auto;
        transition-property: all;
        transition-duration: 2s;
        transition-timing-function: linear;
        transition-delay: 1s;
        /* 也可以这样写 */
        /* transition: all  2s   1s    linear; */
        /*         属性 持续时间 延迟 时间函数 */
    }
    .d1:hover{
        /* 定义鼠标移入后背景色变为skyblue，角度变换30deg */
        background-color: skyblue;
        transform: skew(30deg);
    }

  

二、二维转换

  通过二维的转换，我们可以实现元素在二维平面上的一个移动及形变。

  实现该效果我们可以使用transform属性和transform-origin属性。

  transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

  transform-origin 属性允许改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。(就是沿着轴移动)

transform-origin 属性必须与transform属性一起用。

  注意，在这里我们使用的虽然也是直角坐标系，不过方向与我们的习惯不太相同。在浏览器中，x轴为水平线并以向右为正方向，y轴为竖直线以向下为正方向，z轴垂直屏幕向外为正方向。

  以下的方法的对于x轴和y轴的转换基本都是相对与那条轴进行的。

  2D转换有几种常用方法

1、translate()方法

  通过 translate() 方法，元素从其当前位置移动，第一个值相当于left，第二个值相当于top。

  简单来说就是位移。

函数	描述
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。

CSS

    .d1{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        transform: translate(100px,100px);
    }

2、rotate() 方法

  通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

  括号内传入要旋转的角度。

CSS

    .d1{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        transform: rotateX(30deg);
    }

CSS

    .d1{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        transform: rotateX(30deg) rotateY(10deg);
    }

  沿着某轴旋转实际上就是沿着中心该轴的水平线翻动。

3、scale() 方法

  通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，倍数增加宽度和高度。

函数	描述
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。

CSS

    .d1{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        transform: scaleX(2) scaleY(4);
    }

4、skew() 方法

  通过 skew() 方法，元素翻转给定的角度，倾斜转换。

函数	描述
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

CSS

    .d1{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        transform: skewX(30deg);
    }

5、matrix() 方法(不常用)

  matrix() 方法把所有 2D 转换方法组合在一起。

  matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。