首页 > 代码库 > CSS学习笔记2-2d变换和过渡属性

CSS学习笔记2-2d变换和过渡属性

前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下。

2D转换

transform:translate||rotate||scale||skew

平移、旋转、缩放、斜切

1. 平移 transform:translate()

参数说明:

  1. 只有一个值的情况下,表示水平方向运动,正值向右,负值向左,也可以接受百分比,百分比参照的是自身的宽,高
  2. 两个值分别控制水平和垂直
  3. 移动不会影响其他的元素,类似于相对定位
  4. 我们可以通过盒子的绝对定位配合transform:translate(-50%,-50%)实现一个没有宽度高度的盒子水平垂直居中 ,如果没有宽度的话,盒子最大的宽只能达到父盒子的一半
  5. 如果想要单个的方向移动 可以写成 translateX()和translateY()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box:hover{
            /* transform: translate(-10px,10px); */
            /* transform: translateY(-10px); */
            transform: translateY(10%);
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
</html>

2. 旋转 transform:rotate()

参数说明:

  1. 单位是deg 角度
  2. 整体发生旋转(包括里面的内容)
  3. 正值是顺时针方向旋转 负值反之
  4. 中心点可以控制 transform-origin:值(值可以是方位名词,可以是像素,也可以是百分比,参照的是自身的宽高)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 10s;
            transform-origin: 50% 50%;
        }
        .box:hover{
            transform: rotate(-50deg);
        }
    </style>
</head>
<body>
    <div class="box">1</div>
</body>
</html>

3.缩放 transform:scale()

参数说明:

  1. 没有单位,接受数值和小数
  2. 只有一个值的情况,整体缩放(等比例)
  3. 两个值的情况,宽度和高度分别缩放(可能会变形)
  4. 边框也是会缩放的,并且如果想要一个方向缩放,另外一个方向需要写一个1
  5. 缩放的中心点也可以被控制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            border: 5px solid #000;
            transform-origin: right;
        }
        .box:hover{
            transform: scale(2,1);
        }
    </style>
</head>
<body>
    <div class="box">1</div>
</body>
</html>

4.斜切 transform:skew()

参数说明:

  1. 单位是deg
  2. 只有一个值的情况下,水平斜切
  3. 两个值的情况下,水平垂直分别斜切
  4. 斜切的中心点也可以被控制 如果是X轴斜切 中心点控制上下 如果是Y轴斜切 中心点控制左右
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            border: 5px solid #000;
            transform-origin: bottom;
        }
        .box:hover{
            transform: skew(45deg);
        }
    </style>
</head>
<body>
    <div class="box">1</div>
</body>
</html>

5.过渡 transition

transition:属性 持续时间 过渡曲线 延时

过渡不是动画,是由css的一种状态到另外一种状态中间变换的过程。

值说明:

  1. 那个属性需要过渡就写什么属性 可以用all来代替全部 (必写)
  2. 过渡持续的时间,单位可以s或者是ms (必写)
  3. 过渡的曲线
  4. 过渡从延时多长时间开始

6.2D转换总结

  1. 移动,斜切,放大都是可以通过X或者Y去控制某一个方向
  2. 中心点可以控制旋转,缩放,斜切
  3. 如果我们想要多个2D效果共存,需要采用连写的方式
  4. 当在不同场景出现需要transfrom的时候,需要复制前面已经存在的,防止覆盖
  5. Transform的转换效果顺序尽量保持统一,如果不统一会出现一些问题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 1s;
            border: 5px solid #000;
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%) rotate(0deg) scale(1);
        }
        .box:hover{
            transform:translate(-50%,-50%) rotate(360deg) scale(2);
        }
    </style>
</head>
<body>
    <div class="box">1</div>
</body>
</html>

CSS学习笔记2-2d变换和过渡属性