transform影响占据位置和边距

这是原来的div

clipboard.png

然后设置了transform后

clipboard.png

他的占据位置没变,但是他的margin都变了,一般这种情况怎么解决

---------------------------------分隔线--------------------------------------------------

其实就是怎么让这两个div变形后占据位置也变大

<!DOCTYPE html>
<html>
<head>
    <title>css2</title>
    <style>
        .box{
            border: 1px solid red;
            display: inline-block;
        }
        .div{
            height: 100px;
            width: 100px;
            border: 1px solid black;
        }
        .box .div{
            transform: skew(30deg, 0deg);
        }
    </style>
</head>
<body>
        <div class="box">
            <div class="div"></div>
        </div>
        <div class="box">
            <div class="div"></div>
        </div>
</body>
</html>

clipboard.png

变成这样

clipboard.png

难道只能更具他变形的大小调整margin吗??

阅读 3.5k
1 个回答

不如试试绝对布局?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题