css3移动加旋转中遇到的问题

最新推荐文章于 2023-10-15 22:53:55 发布

Antgeek

最新推荐文章于 2023-10-15 22:53:55 发布

阅读量368

点赞数

分类专栏：日常报错

本文链接：https://blog.csdn.net/weixin_44745147/article/details/115758514

版权

日常报错专栏收录该内容

46 篇文章 0 订阅

订阅专栏

在写作业的过程中发现移动加上旋转的话，就会发生想不到的效果

经过一番研究发现，如果你将旋转的中心设置为右上，旋转x度，水平移动a，垂直移动b。

那么元素的最终位置判断方法：

先将元素水平移动a,垂直移动b

然后以元素初始位置的右上角旋转角度x

上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .div1 {
        width: 100px;
        height: 100px;
        transform-origin: top right;
        transition: transform 3s;
        background-color: blue;
      }
      .div1:hover {
        transform: translate(100px, 100px);
        transform: rotate(360deg) translate(100px, 100px);
      }
      .div2 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 100px;
        left: 100px;
        background-color: red;
        transform-origin: top right;
        /* transition: transform 3s; */
        transform: rotate(2deg) translate(100px, 100px);
      }
      .div2:hover {
        transform: translate(100px, 100px);
        transform: rotate(2deg) translate(100px, 100px);
      }
      .div3 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 200px;
        left: 200px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </body>
</html>

可以打开控制台不断改变角度，就会发现其中奥秘

Antgeek

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3移动加旋转中遇到的问题

在写作业的过程中发现移动加上旋转的话，就会发生想不到的效果经过一番研究发现，如果你将旋转的中心设置为右上，旋转x度，水平移动a，垂直移动b。那么元素的最终位置判断方法：先将元素水平移动a,垂直移动b然后以元素初始位置的右上角旋转角度x上代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compa
复制链接

扫一扫