CSS3学习笔记----day03

最新推荐文章于 2024-05-26 15:41:02 发布

原创最新推荐文章于 2024-05-26 15:41:02 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

CSS3学习笔记专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSS3中的2D变换方法，包括translate()位移、rotate()旋转、scale()缩放、skew()拉伸及matrix()矩阵变换，并提供了具体的HTML代码示例，帮助读者理解和应用这些变换技巧。

CSS3 2D转换

概要：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

2D 变换方法

方法	作用
translate()	位移
rotate()	旋转
scale()	缩放
skew()	拉伸
matrix()	矩阵变换

在这里插入图片描述

2D 变换方法演示

translate()位移：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 2D转换</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: #4361ee;
            border-radius: 18px;

            transform: translate(100px,200px);
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

在这里插入图片描述

rotate()旋转：

    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: #4361ee;
            border-radius: 18px;

            transform: translate(100px,200px) rotate(45deg);
        }
    </style>

在这里插入图片描述

scale()缩放：

scale(x,y)：x和y值为对应坐标轴扩大多少倍，示例中x和y轴均扩大为原来的两倍

<style>
    #box{
        width: 100px;
        height: 100px;
        background-color: #4361ee;
        border-radius: 18px;

        transform: translate(100px,200px) rotate(45deg) scale(2,2);
    }
</style>

在这里插入图片描述

skew()拉伸：

skewX() ------------X轴斜切
skewY() ------------Y轴斜切
skew(anglex,angley)

<style>
    #box{
        width: 100px;
        height: 100px;
        background-color: #4361ee;
        border-radius: 18px;

        transform:translate(100px,100px) skew(30deg,30deg);
    }
</style>

在这里插入图片描述

matrix()矩阵：

Matrix 是以上其他方法的底层方法，可以使用matrix达到上边所有效果，但是mtrix使用起来略显麻烦。 Matrix方法有六个参数Matrix(a,b,c,d,e,f) 其实Matrix是经过矩阵变换来进行图形变换的，但是矩阵变换理解太麻烦，反正我是理解不了。。。数学太差劲。。。不过搞明白了Matrix里的参数意义，也行

参数	作用
a	缩放X轴
b	拉伸Y轴
c	拉伸X轴
d	缩放Y轴
e	位移X轴
f	位移Y轴

其中，拉伸是小数数值，是需要计算的，比如，拉伸X 45°，那么，就需要计算tan(45) = 1.61977519054 ,我们要使用的就是1.61977519054 所以这里要注意一下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 2D转换</title>
<style>
    #box{
        width: 100px;
        height: 100px;
        background-color: #4361ee;
        border-radius: 18px;
        text-align: center;
        line-height: 100px;
        color: red;
        transform:matrix(1,0,0,1,50,100);
    }
    #box2{
        width: 100px;
        height: 100px;
        background-color: #6930c3;
        border-radius: 18px;
        text-align: center;
        line-height: 100px;
        color: red;
        transform:matrix(3,0,0,3,300,100);
    }

    #box3{
        width: 100px;
        height: 100px;
        background-color: #6930c3;
        border-radius: 18px;
        text-align: center;
        line-height: 100px;
        color: red;
        transform:matrix(1,1.61977519054,0,1,600,100);
    }

    #box4{
        width: 100px;
        height: 100px;
        background-color: #6930c3;
        border-radius: 18px;
        text-align: center;
        line-height: 100px;
        color: red;
        transform:matrix(1,0,1.61977519054,1,900,100);
    }

    #box5{
        width: 100px;
        height: 100px;
        background-color: #6930c3;
        border-radius: 18px;
        text-align: center;
        line-height: 100px;
        color: red;
        transform:matrix(1,1.61977519054,1.61977519054,1,1200,100);
    }
</style>
</head>
<body>
    <div id="box">位移</div>
    <div id="box2">缩放</div>
    <div id="box3">拉伸Y</div>
    <div id="box4">拉伸X</div>
    <div id="box5">拉伸X,Y</div>
</body>
</html>

在这里插入图片描述