CSS变形

最新推荐文章于 2025-04-22 14:23:04 发布

JerryQuary

最新推荐文章于 2025-04-22 14:23:04 发布

阅读量3.1k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/JerryQuery/article/details/111932741

版权

本文详细介绍了CSS中的变形功能，包括translate、rotate、scale、skew、matrix等2D和3D变换，以及transform-origin、perspective等属性。内容涵盖元素的移动、旋转、缩放、倾斜，以及3D舞台的创建与应用，如透视效果、背面隐藏等，帮助理解CSS如何实现丰富的动画和交互效果。

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

变形介绍：

CSS提供的形变功能不仅可以平移元素，还能做很多其他的事情，比如旋转、缩放、翻转等，让页面的动画与交互看起来更加自然。

坐标系：

x轴的正值在右侧，负值在左侧。y轴的正值沿纵轴向下，负值沿纵轴向上。z轴上的正值离你较近，负值离你较远

易混淆的三个属性：

transform 变形（用于元素进行旋转、缩放、移动）
translate 移动
transition 过渡（设置元素的样式过度）

transform 变形

语法：transform: none|transform-functions;

属性：

1.transform-origin：

用于指定元素变形的中心点。默认中心点就是元素的正中心，即XYZ轴的50% 50% 0处。

通过该属性改变元素在XYZ轴的中心点，正值表示正向位移，负值表示负向位移

2.transform-style：

这个属性只有两个值flat和preserve-3d。用于指定舞台为2D或3D，默认值flat表示2D

注：在变形元素自身上指定该属性是没有用的，要在变形元素的父元素上设置该属性。

3.translate：

translate位移系列中用于2D的有：translate，translateX，translateY
设单值表示只X轴位移，Y轴坐标不变

transform: translate(100px);等价于transform: translate(100px,0)
transform: translateY(100px);等价于transform: translate(0, 100px);

如何利用translate让盒子居中对齐：

transform：translate（x%,y%）

百分数是以本元素为标准而不是以父级元素为标准。

.div1{
		 position: absolute;  
	     left: 50%;   
		 top: 50%;
 	     transform: translate(-50%,-50%);
     }

4.scale:

scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：指定对象X轴的（水平方向）缩放
scaley()：指定对象Y轴的（垂直方向）缩放
scale还能设负数，负数会先将元素反转再缩放

一张宽高100px图片 tranforn:scale(1,2) ; transform:scaleX(3); transform: scale(-1.5, -2);

5.rotate,单位是deg。

旋转函数绕某个轴或者3D空间某个向量旋转。rotate X，rotate Y，rotateZ，rotate都只接收一个值。rotate（）等同于rotateZ（）都是绕Z轴旋转。

6.skew 倾斜

第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

对于x轴，正值为左，负值为右。

对于Y轴，正值为上，负值为下。

transform: skewY(20deg); transform: skewY(-20deg); transform: skewX(20deg); transform: skew(20deg,20deg);

7.matrix

3x3 的变换矩阵

对二维向量进行转换

其中 x1、y1 为经过 Matrix 转换后的向量。由公式可知，Matrix 中 e, f 主要用于设置元素在 X轴和 Y轴上的平移。a, d 主要用于设置元素在 X轴和 Y轴上的缩放。a,b,c,d 用于设置元素在 XY 平面上的旋转。rotate/translate/screw 等都可以直接通过设置 Matrix 来达到同样的效果

3D变形

上面元素的平移、旋转、缩放和倾斜等功能。这些效果只是单纯在二维平面图上的，我们称之为 2D。在2D平面基础上多出一个z轴，称之为三维立体。

1.perspective ：

透视原理：视点距离屏幕的长短。值越小表示用户眼睛距离屏幕越近，相当于创建一个较大的3D舞台。反之，值越大表示用户眼睛距离屏幕越远。（近大远小）
默认值是none表示无3D效果，只能设px值，不能设%百分比
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

eg:

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black; 
perspective:100px;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>

2.perspective-origin:

定义视线汇聚于哪一点。基点默认值是50% 50%即center，和perspective属性结合着在父元素上一起用。

eg:在上述代码基础上添加如下属性

perspective-origin: left; perspective-origin: right top;

3.backface-visibility：

用于是否可以看见3D舞台背面，默认值visible表示背面可见，可以设成hidden让背面不可见。通常当旋转时，如果不希望背面显示出来，该属性就很有用，设成hidden即可

<!DOCTYPE html>
<html>
<head>
<style>
div
{
position:relative;
height:60px;
width:60px;
border:1px solid #000;
background-color:yellow;
transform:rotateY(180deg); 
}
#div1
{
backface-visibility:hidden;
}
#div2
{
backface-visibility:visible;
}
</style>
</head>
<body>

<div id="div1">DIV 1</div>

<div id="div2">DIV 2</div>

</body>
</html>

4.translate3d:

translate3d位移系列中用于3D的有：translate3d，translateZ

translate3d(tx,ty,tz)，其中tz的Z轴长度只能为px值，不能为%百分比

<body>
    <div id="a">
        <img src="./img/pig.jpeg" alt="" />
    </div>
</body>
<style>
    #a {
        perspective: 1000px;
        transform-style: preserve-3d;
    }

    img {
        transform: translate3d(300px, 100px, 240px);
    }
</style>

5.rotate3d

rotate3d中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)四个功能函数；