CSS3 2D转换与3D转换

最新推荐文章于 2022-09-13 09:18:49 发布

~☜~

最新推荐文章于 2022-09-13 09:18:49 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

文章标签： 3d css3 css

本文链接：https://blog.csdn.net/qq_61601160/article/details/121745402

本文详细介绍了CSS中的2D转换，包括translate、rotate、scale、skew和matrix方法，以及它们的简写形式。同时，通过实例展示了如何使用2D转换制作翻转三角形图标。此外，还讲解了CSS的3D转换，如rotate3d、rotateX、rotateY和rotateZ，以及应用示例。这些转换技术在网页设计中用于创建动态效果和交互体验。

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

2D转换

在网页制作的过程中，我们有时会需要改变原有图形的尺寸，位置，方向等，虽然说通过改变宽和高也能实现，但是在位置与方向上的修改就显得没有那么灵活。
所以，引入了一个属性——transform来实现2D转换

1.translate()方法

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

2.rotate（）方法

rotate值（30deg）元素顺时针旋转30度。
正值为顺时针旋转，负值为逆时针旋转

3.scale（）

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
先宽后高

4.skew()

skew(30deg,20deg) 元素在X轴和Y轴上倾斜30度20度。
参数为负表示向相反方向倾斜

5.matrix（）

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

总结

以上写法均为简写，以下为每一种取值

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

应用举例：

在网页中经常会看到一个三角形小图标，鼠标放上去之后小三角形逆置180°并且弹出二级菜单，今天，我们就利用2D转换和盒模型的简单知识来简单制作一个这样的图标。

div{
            
            border-left-color: transparent;
            border-bottom-color:transparent;
            border-top-color:yellowgreen;
            border-right-color:transparent;
            width: 0px;
            height: 0px;
            border-width:100px;
            border-style: solid;
        }
        div:hover{
            transform:rotate(180deg);
        }

页面上的效果
鼠标放上此三角形后会变成下面的样子
放上鼠标

3D转换

3D转换是在三维空间的转换
与三维转换相关的属性也为transform

1.rotate3d(x,y,z,angle) 定义 3D 旋转

2.rotateX(angle) 定义沿 X 轴的 3D 旋转。

3.rotateY(angle) 定义沿 Y 轴的 3D 旋转。

4.rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

应用举例：

 div{
            
            border-left-color: transparent;
            border-bottom-color:transparent;
            border-top-color:yellowgreen;
            border-right-color:transparent;
            width: 0px;
            height: 0px;
            border-width:100px;
            border-style: solid;
            /*transform:*/
        }
        div:hover{
            transform:rotateX(120deg);
           
           }