css 2D和3D转换

她敲级凶的

于 2023-09-19 21:57:41 发布

阅读量68

点赞数 1

文章标签： css 前端 css3 html5

本文链接：https://blog.csdn.net/weixin_52350720/article/details/132948570

版权

9.18学习

一、2D转换

2D转换可以对元素进行移动、缩放、转动、拉长或拉伸。

属性transform

1.translate（移动）

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1 {
				width: 200px;
				height: 200px;
				background-color: pink;
				font-size: 30px;
				transition: 1s;
			}
			.box2 {
				width: 200px;
				height: 200px;
				background-color: orange;
				font-size: 30px;
        /* 过渡 */
				transition: 1s;
				margin: 0 auto;
			}
  </style>
</head>
<body>
          <button type="button" οnclick="func1()">按钮1</button>
          <button type="button" οnclick="func2()">按钮2</button>
      <div class="box1">123123123</div>
      <div class="box2">123123123</div>
       
</body>
  <script>
    var box1 = document.getElementsByClassName("box1")[0];
    function func1(){
      box1.style.transform = "translate(100px,100px)"
    }
    function func2(){
      
    }
  </script>
</html>

在这里插入图片描述

可以看到我给按钮1设置了一个点击事件，当点击按钮1之后，box1会移动x100，y100的地方。（这个移动是根据正方形的正中心为准的）
如果需要单独设置x（y）的数值，可以使用translateX或translateY来单独设置。
translate只设置一个值的话，只会作用最后一个。