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

时间：2016-11-20 00:11:36 阅读：199 评论：0 收藏：0 [点我收藏+]

标签：场景中心 scale 中间时间统一状态小数 css3

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

2D转换

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

平移、旋转、缩放、斜切

1. 平移 transform:translate()

参数说明：

只有一个值的情况下，表示水平方向运动，正值向右，负值向左，也可以接受百分比，百分比参照的是自身的宽，高
两个值分别控制水平和垂直
移动不会影响其他的元素，类似于相对定位
我们可以通过盒子的绝对定位配合transform：translate（-50%，-50%）实现一个没有宽度高度的盒子水平垂直居中 ,如果没有宽度的话，盒子最大的宽只能达到父盒子的一半
如果想要单个的方向移动可以写成 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()

参数说明：

单位是deg 角度
整体发生旋转（包括里面的内容）
正值是顺时针方向旋转负值反之
中心点可以控制 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
缩放的中心点也可以被控制

<!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()

参数说明：

单位是deg
只有一个值的情况下，水平斜切
两个值的情况下，水平垂直分别斜切
斜切的中心点也可以被控制如果是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的一种状态到另外一种状态中间变换的过程。

值说明：

那个属性需要过渡就写什么属性可以用all来代替全部（必写）
过渡持续的时间，单位可以s或者是ms （必写）
过渡的曲线
过渡从延时多长时间开始

6.2D转换总结

移动，斜切，放大都是可以通过X或者Y去控制某一个方向
中心点可以控制旋转，缩放，斜切
如果我们想要多个2D效果共存，需要采用连写的方式
当在不同场景出现需要transfrom的时候，需要复制前面已经存在的，防止覆盖
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变换和过渡属性

标签：场景中心 scale 中间时间统一状态小数 css3

原文地址：http://www.cnblogs.com/xinyiyake/p/6081711.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行