开启新的篇章，从新的起点——“CSS3”扬帆起航！

于 2021-10-27 13:40:40 发布
阅读量265 收藏
点赞数 8
文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chnnds/article/details/120988530
版权
本文深入介绍了CSS3的选择器、2D和3D转换，包括translate、rotate和scale的使用，以及3D转换中的translateZ和rotateZ。通过实例展示了如何实现元素的移动、旋转和缩放。此外，还探讨了CSS3动画的基本使用和复合写法，提供了关键帧动画的示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

前言

学习了这么久，小编终于进入了梦寐以求的下一个阶段，小编我满怀对知识的渴望，开始了新的征程。
在这里插入图片描述

1、CSS3选择器

实在是没想到，又是这熟悉的“他”熟悉的感觉，没错！就是那个“男人”，他又来了！没想到在新的篇章里面第一个看到的不是“新面孔”，而是一个“老熟人”。这个小编已经说过几次了，但是他还是又来了。所以呢小编也不多费口舌了！都是老熟人！直接上图：
在这里插入图片描述
如果你觉得看图不过瘾那咱们换个方式，可以去看看小编的另外一篇博客，上面有详细的使用方法，链接在这里：https://blog.youkuaiyun.com/chnnds/article/details/120719098.

2、CSS3—2D、3D转换

现在才是真正的开始，上面只是开胃小菜，如果你忘记了那么你再回去看看他吧！他不会因为你的遗忘而伤心的，只要你愿意再去看看他！现在我们来说说我们的新朋友——2D转换！

2.1.什么是2D？

2D就是二维的意思。在一个平面上的内容就是二维。 二维即左右、前后两个方向，不存在上下。在一张纸上的内容就可以看做成是二维。 即只有面积，没有体积。二维是平面技术的一种，例如普通的平面动漫，称之为二维动漫、简称二维。
二维图：
在这里插入图片描述
在网页中，我们的x轴向右走是为正值，向左走为负值。我们的y轴也是同理，我们的y轴向下走是为正值，向下则为负值。所以在移动位置时，一定要注意你移动的方向。

2.2.什么是2D转换呢？

在CSS3中完整属性叫transform转换，它是是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果

  • transform：translate(x,y)；移动
  • transform：rotate(45deg);旋转
  • transform：scale(x,y);缩放

2.2.1.transform：translate(x,y);移动

重点：

  1. 定义2D转换中的移动，沿着X和Y轴移动元素
  2. translate最大的优点：不会影响到其他元素的位置
  3. translate中的百分比单位是相对于自身元素的translate(50%,50%);
  4. 对行内标签没有效果

那么该如何使用呢？不要着急！小编这就告诉你们如何使用！
我们先定义一个盒子给他设置一下宽高和背景颜色。

<!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>translate移动</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

效果图：
在这里插入图片描述
现在我们给他添加transform：translate(x,y)属性：

<!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>translate移动</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translate(100px, 100px);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

效果图：
在这里插入图片描述

2.2.2.transform：rotate(45deg);旋转

重点：

  1. rotate里面跟度数。单位是deg，比如rotate（45deg）
  2. 角度为正时，顺时针，负值，逆时针
  3. 默认的旋转中心点是元素的中心点

旋转我们还是这个用这个案例，我们给这个盒子增加一个transform：rotate(45deg);我们一起来看看效果怎么样！

<!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>translate移动</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translate(100px, 100px) rotate(45deg);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

效果图：
在这里插入图片描述

2.2.3.transform：scale(x,y);缩放

重点：

  1. 注意其中的x和y是用逗号隔开
  2. transform:scale(1,1):宽高都放大一倍，相当于没有放大
  3. transform:scale(2,2):宽高都放大2倍
  4. transform:scale(2):只写一个参数，第二个参数和第一个参数一样
  5. transform:scale(0.5,0.5):缩小
  6. scale缩放最大的优势：可以设置旋转中心点缩放，默认以中心点缩放的，不影响其它盒子

缩放我们还是这个用这个案例，我们给这个盒子增加一个transform：scale(x,y);我在这里给他放大1.5倍我们一起来看看效果怎么样！

<!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>translate移动</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translate(100px, 100px) rotate(45deg) scale(1.5, 1.5);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

效果图：
在这里插入图片描述
在这里小编使用的是transform的复合写法：transform：移动 旋转 缩放；这里要注意的是移动一定要先写在前面，你要问为什么，小编也不知道，他就是这么说的！哈哈哈！

2.3.什么是3D？

据小编了解3D是“三维空间”的缩写。三维空间（也称为三度空间、三次元、3D、“3 Dimensions”），的简称日常生活中可指由长、宽、高三个维度所构成的空间，而且常常是指三维的欧几里得空间。
三维坐标图
在这里插入图片描述

2.3.1.3D属性介绍

在我们的网页世界中，三维和二维唯一的区别就是三维比二维多了一个z轴，z轴这个轴使用起来更像是放大和缩小的那种感觉，就像是前后，当你在z轴上的值是正值的时候，就代表这个盒子离你的距离更近，你看起来这个盒子就会越大，当你的值为负值的时候，这个盒子就会离你越远所以你看起来这个盒子就会更小。比如你和你的朋友站成一列的时候，他和你站的越近他就会在你的视线范围里越大，相反他和你隔的越远，那么他在你的视线范围里就越小。就是这样的一个道理！3D的知识点小编给大家整理了一下！咱们看图说话：
在这里插入图片描述
重点：

  1. 3D移动:transform：translate();
  2. 3D旋转:transform：rotateZ();
  3. 透视：perspective：像素

2.3.2.3D移动:transform：translateZ();

在这个地方小编为你们准备了两个小小的案例来帮助你们理解，首先是3D移动的小案例：

<!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>
        body {
            perspective: 500px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 100px auto;
            transform: translateZ(100px);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>
</html>

效果图：
在这里插入图片描述
我们的Z轴必须借助我们的透视才能进行显示，所以在这里呢我是给body添加了透视属性。

2.3.3.3D旋转:transform：rotateZ();

旋转小案例：在这里小编使用了一个图片，为了更好的显示效果小编做了一个鼠标放上去图片会旋转180度的一个效果！

<!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>
        body {
            perspective: 500px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 2s;
        }
        
        img:hover {
            transform: rotateZ(180deg);
        }
    </style>
</head>

<body>
    <img src="dog.jpg" alt="">
</body>

</html>

效果图：
鼠标放上去之前：
在这里插入图片描述
鼠标放上去之后：
在这里插入图片描述
最后小编再说一句在对Z轴设置效果的时候一定要对我们元素的父盒子添加透视属性才能看到我们所需要的效果，否者我们是看到你制作的效果的。

3、CSS3—动画

这是小编今天最后的一个知识点分享！他叫做CSS动画，在以前那个月黑风高的晚上~~呸！不好意思，跑题了，总之在以前小编用过flash制作动画，没想到的是我们的css也可以做动画，而且也可以想flash一样做逐帧动画。知道这一点之后小编可是激动了好久。下面话不多说！上才艺！
知识点总结图：
在这里插入图片描述
这个知识点难度不大，最主要的就是大家要掌握两个点：

  1. 动画的基本使用
  2. 动画属性的复合写法

3.1动画的基本使用

  1. 定义动画
    语法：
@keyframes 动画名称{
		0%{
					属性1;
				}

		100%{
					属性2;
				}



}
  1. 动画的调用
    语法：
animation-name: 动画名称;

小编为大家准备了一个有意思的小案例，大家可以去试试看：

<!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>动画的基本使用</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            /* 调用动画 */
            animation-name: move;
            /* 动画时间 */
            animation-duration: 2s;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

3.1动画属性的复合写法

animation: name duration timing-function delay iteration-count direction fill-mode;

这些属性大家可以在上面的图片上找到对应的属性。这个复合写法大家记住就好！因为在使用的过程中我们一般只调用几个属性不会调用全部的属性。

总结

小编今天的分享就到这里了，感觉新的征程不好开始啊！才开始就这么多的知识！小编太难了！！！！但是小编会努力的！
在这里插入图片描述

chnnds
关注
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值