【发布时间】：2021-04-22 23:24:10
【问题描述】：
我正在努力解决转换后的 div 与引导导航栏重叠的问题，如下图所示。有谁知道为什么会发生这种情况？
它发生在 Safari 中，但 不会 发生在 Firefox 或 Chrome 中。当没有对 div 应用任何变换时，它也不会发生。
我正在使用 bootstrap 4 和 tailwind.css。我已经包含了下面的代码。谢谢。
感谢任何指点，谢谢。
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<nav class="navbar w-100 navbar-expand-md navbar-light bg-warning fixed-top " style="background-color: #eee;">
<a class="navbar-brand" href="">
Logo
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav w-100">
<a href="" class="effect3 nav-item nav-link">nav item</a>
</div>
</div>
</nav>
<br><br><br><br><br><br><br><br>
<body>
<div class="column p-0 place-self-center">
<div class="card bg-transparent border-0 ">
<div class="w-50 border-2 border-yellow-400 rounded-t-lg rounded-b-lg h-96 bg-dark pb-0" style="transform: perspective(150rem) rotateY(-25deg); box-shadow: 10px 10px 40px #888888;"></div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
【问题讨论】：
-
这是导致问题的
rotateY()。我只是不知道如何绕过它。
标签： html css bootstrap-4 frontend css-transforms