CSS的2D与3D变换_css中的2d于3d转换-CSDN博客

本文链接：https://blog.csdn.net/pan303121/article/details/121636439

我们观看的电影普遍分为2D电影与3D电影，而我们的css的转化方式也分为2D转换和3D转换

2D转换

通过translate rotate scale skew matrix等属性进行2D转化

translate() 方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
 
  transform: translate(50px,200px); 
}
</style>
</head>
<body>

<h1>translate() 方法</h1>
<p>translate() 方法从元素当前位置对其进行移动：</p>

<div>
该 div 元素从其当前位置向右移动 50 个像素，并向下移动 200个像素。
</div>

</body>
</html>

如图在空白页面上向右移动50个像素，向下移动了200个像素

rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  
  transform: rotate(100deg)
}
</style>
</head>
<body>

<h1>rotate() 方法</h1>
<p>rotation() 方法顺时针或逆时针旋转元素。</p>

<div>
这是一个普通的 div 元素。
</div>

<div id="myDiv">
这个 div 元素顺时针旋转 100 度。
</div>

</body>
</html>

如图顺时针旋转了100度当然如果想要逆时针选择只需要取负值即可。

scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

scaleX()增加或减小X方向上元素大小

scaleY()增加或减小Y方向上元素大小

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  
  transform: scale(2,3); 
}
</style>
</head>
<body>

<h1>scale() 方法</h1>
<p>scale() 方法增加或缩减元素的尺寸。</p>

<div>
该 div 元素是其原始宽度的两倍，是其原始高度的三倍。
</div>

</body>
</html>

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

skewX() 方法使元素沿 X 轴倾斜给定角度。

skewY() 方法使元素沿 Y 轴倾斜给定角度。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
 
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>skew() 方法</h1>
<p>skew() 方法将元素倾斜到给定角度。</p>

<div>
这是一个普通的 div 元素。
</div>

<div id="myDiv">
该 div 元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度。
</div>

</body>
</html>

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

matrix其实就是2D转化的结合

3D转换

3D转换很多属性与2D属性相同但3D转换主要注重空间转换

rotateX() 方法

rotateX() 方法使元素绕其 X 轴旋转给定角度：

rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateX(150deg);
}
</style>
</head>
<body>

<h1>rotateX() 方法</h1>
<p>rotationX() 方法将元素围绕其 X 轴旋转给定程度。</p>

<div>
这是一个普通的 div 元素。
</div>

<div id="myDiv">
该 div 元素旋转了 150 度。
</div>

<p><b>注释：</b>Internet Explorer 9（以及更早的版本）不支持 rotateX() 方法。</p>

</body>
</html>

Y轴与Z轴同理

perspective 属性

设置元素被查看位置的视图：

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150;
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); 
}
</style>
</head>

<body>

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