CSS3——过渡transition及2D transform

老年迪迦
241 阅读5分钟
一、过渡transition

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

transitiond 具体的属性：

  • transition-property：参与过渡的属性/all所有属性 （默认值为all）

  • transition-duration：过渡的持续时间（单位为s/ms）

  • transition-delay：延迟过渡的时间（单位为s/ms）

  • transition-timing-function：过渡的动画类型（如下图）

359f19507daf497b9de0a16b1e80afae.png

简写：transition:all/具体属性 运动时间s/ms 延迟时间s/ms 动画类型，.....

(如果过渡的属性不一样，但是过渡效果都一样时，则可直接用all ；如属性不一样且效果要求也不一样，则属性间用逗号隔开)

2018100817153057.gif

   `<div class="box"></div>`

CSS

.box {
    width:  160px;
    height: 160px;
    background-color: #ff0000;
    /*过渡效果*/
    transition: background-color .5s ease-out 0s, border-radius .35s ease-in 0s;
}
.box:hover {
    background-color: #000;
    border-radius: 80px;
}

transiition放在hover前后的区别：

①前：鼠标悬停在元素后，元素会按照所设定时间和延迟缓慢显示效果；当鼠标移走后，还是会按照所定时间和延迟 缓慢回到原状态

②后：鼠标悬停在元素后，元素会缓慢显示效果；不过当鼠标移走后，过渡则无效，元素也就没有缓慢过渡的效果，会一瞬间回到原状态

注：不是所有的CSS样式值都可以过渡（如：display），只有具有中间值的属性才具备过渡效果 ,具体如下：

颜色: color background-color border-color outline-color
 
位置: backround-position left right top bottom
 
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
 
数字: opacity visibility z-index font-weight zoom
 
组合: text-shadow transform box-shadow clip
 
其他: gradient
二、2D transform

transform 翻译成汉语具有"变换"或者"改变"的意思。

通过此属性具有非常强大的功能，如可以实现元素的位移、拉伸、缩放或旋转等效果

最能体现transform 属性强大实力的是实现元素的3D变换效果。

2D变换则是指在一个平面对元素进行操作。

  • 明确一下坐标系：

dcdc5a112dd2453199ee8514fe9ad698.png

对上面坐标系简单分析如下： （1）默认状态下，x轴是水平的，向右为正。 （2）默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。

transform的基本属性值

（1）2D位移 translate()

translate(x,y) （X轴，Y轴），两值一样时，可简写为一位

注：当translate 只有一个值的时候，默认y=0，只移动x轴；且位移最好写在最前面

将元素向指定的方向移动，类似于position中的relative，即相对于元素本身移动。

水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；

垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty);

对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。

div {
    transform: translate(100px,20px):
}

image.png

（2）2D缩放scale( )

让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素放大。

缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。例如，scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。

  • scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。

  • scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。

（3）2D旋转rotate( )

  • 旋转rotate(360deg)函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。

  • 它主要在二维空间内进行操作，接受一个角度值（-360~360deg），用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

  • rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转（①以人物为例：正值向后躺着转，负值向前扑着转；②以左手大拇指指向自己为X轴，正值其他四指向右倒顺时针旋转，负值其他四指向左躺逆时针旋转）

  • rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

  • 变换旋转基准点：transform-origin: 0px/% 0px/%;

  • ( 水平方向leftr | center | right或value 垂直方向top | center | bottom或value;）

image.png

（4）2D拉伸skew( )

  • 倾斜skew(x，y) | skewX( ) | skewY( )函数 能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

  • 一个参数时：表示水平方向的倾斜角度；

  • 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

image.png

transform的变形原点——transform-origin属性

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转

注：该属性只有在设置了transform属性的时候起作用； 因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew等操作都是以元素自己中心位置进行变化的。

image.png

三、案例

动画——缓缓打开的扇子（代码量较多，大家可以复制粘贴试试效果哈！）

image.png

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        div {
            width: 30px;
            height: 500px;
            /* border: 1px solid red; */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            transform: rotate(-80deg);
            transform-origin: center 420px;
        }
 
        p {
            width: 30px;
            height: 500px;
            border: 1px skyblue dashed;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: center 420px;
            transition: all 2s;
        }
 
        div:hover p:nth-child(2) {
            transform: rotate(10deg);
        }
 
        div:hover p:nth-child(3) {
            transform: rotate(20deg);
        }
 
        div:hover p:nth-child(4) {
            transform: rotate(30deg);
        }
 
        div:hover p:nth-child(5) {
            transform: rotate(40deg);
        }
 
        div:hover p:nth-child(6) {
            transform: rotate(50deg);
        }
 
        div:hover p:nth-child(7) {
            transform: rotate(60deg);
        }
 
        div:hover p:nth-child(8) {
            transform: rotate(70deg);
        }
 
        div:hover p:nth-child(9) {
            transform: rotate(80deg);
        }
 
        div:hover p:nth-child(10) {
            transform: rotate(90deg);
        }
 
        div:hover p:nth-child(11) {
            transform: rotate(100deg);
        }
 
        div:hover p:nth-child(12) {
            transform: rotate(110deg);
        }
 
        div:hover p:nth-child(13) {
            transform: rotate(120deg);
        }
 
        div:hover p:nth-child(14) {
            transform: rotate(130deg);
        }
 
        div:hover p:nth-child(15) {
            transform: rotate(140deg);
        }
 
        div:hover p:nth-child(16) {
            transform: rotate(150deg);
        }
 
        div:hover p:nth-child(17) {
            transform: rotate(160deg);
        }
 
        div:hover p:nth-child(18) {
            transform: rotate(170deg);
        }
 
        i {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #333;
            left: 10px;
            bottom: 75px;
        }
    </style>
</head>
 
<body>
    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <i></i>
    </div>
</body>
 
</html>
avatar
文章
阅读
粉丝