CSS基础知识（七）

最新推荐文章于 2025-11-24 23:00:57 发布

原创最新推荐文章于 2025-11-24 23:00:57 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

自我学习专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了CSS中的2D和3D转换技术，包括translate(), rotate(), scale(), skew()和matrix()等方法的使用，以及如何创建过渡和动画效果。此外，还介绍了多列布局和绘制复杂图形的技巧。

文章目录

2d转换
3D 转换
过渡
动画
多列
绘制图形

2d转换

transform
translate()
rotate()
scale()
skew()
matrix()
值 rotate(30deg) 把元素顺时针旋转 30 度。
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

3D 转换

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
180度的效果
在这里插入图片描述
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
180度的效果

过渡

在这里插入图片描述

动画

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。

在这里插入图片描述简单例子
从红到黄到蓝最后变绿

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

多列

column-count属性指定元素的列数
olumn-gap属性指定的列之间的差距
column-rule属性设置列之间的宽度，样式和颜色
在这里插入图片描述

绘制图形

当宽度为0时可以设置边框实现绘制图形

            width: 0px;
            border-top: 90px solid red;
            border-right: 90px solid blue;
            border-left: 90px solid green;
            border-bottom: 90px solid yellow;

在这里插入图片描述
可以将其他边框设置为透明实现三角形
甚至可以省略下边框

梯形

            width: 200px;
            border-top: 90px solid red;
            border-right: 90px  solid transparent ;
            border-left: 90px  solid transparent ;
            border-bottom: 90px solid transparent;

在这里插入图片描述