CSS 2D3D变换

1.2d位移
2d位移可以改变元素的位置。具体使用方法如下
1.先给元素添加转换属性transform
2.编写transform的具体值
translate() translateX() translateY() 可以写长度值，百分比，百分比是相当于自身的长宽。

translate()移动元素，从当前位置开始。

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

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

1.位移与相对定位相似，都不脱离文档流。不会影响其他元素。
2.位移对行内元素无效
3.位移配合定位可以实现水平居中

  .box{
    position:absolute;
    left:50%;
    top:50%;
}

2.2D缩放
transform:scale();
0.5缩小 1 不变 1.5放大 倍数关系。
scale(X,Y);两个值，x表示宽，y表示高。
scale()只写一个值表示X,Y同时缩放。

div {
  transform: scale(2, 3);
}

div {
  transform: scaleX(2);
}

div {
  transform: scaleY(3);
}

3.2d选转
transform:rotateZ(-30deg);//逆时针30度
transform:rotateZ(30deg);//顺时针30度

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

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

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

4.2D扭曲
transform:skew();

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

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

<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

5.The matrix() function combines all the 2D transform functions into one.

The matrix() function take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

6.多重变换
transform:translate(30px) scale(0.5) rotateZ(30deg);
把旋转放在最后，旋转会改变坐标系。
7.设定原点。
transform-origin:left top;
关键字，一个是对应轴，另一个值取该轴中点。如left 就是左边中点为原点。两个值就是对应的点。
像素值一个值表示横坐标，纵向取50%

1.3D变换
要开启3D空间和设置景深。
1.父元素必须开启3D空间
transform-style:
flat;//2d
preserve-3d;//3d空间
2设置景深(子元素）观察者与z=0平面的距离。
perspective:500px;

2.3D透视点
perspective-origin: 50px 50px;

3.3d位移
translate()

4.3d旋转
rotateX(30deg) rotateY(30deg) rotate3d(1,0,1,20deg);
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotate3d

5.3d缩放
先写transform
然后使用scale(1.5,1.5,1);数字是缩放比例。

posted @ 2024-12-27 13:06  zhongta  阅读(16)  评论(0)    收藏  举报