CSS3 转换，使用 translateX + translateY 设置为正值，似乎没有正确转换

Question

我目前正在尝试在一组不同的面板上实现一些 CSS 过渡效果，使它们看起来像 "sliding in" 从屏幕上看。我希望它们每个都出现在不同的方向（例如从上到下、从左到右等）

据推测，要从下到上和从右到左，我只想设置 translateX 或 translateY，但要设置正值，而不是负值。然后对于所有这些，当我希望它们出现在屏幕上时，我会将值转换为 0。

HTML:

<div class="container">
<div id="about" class="panel">
  <h2>About</h2>
  <p>I'm Mike and I don't know!</p>
  <a href="#">Close</a>
</div>

<div id="projects" class="panel">
  <h2>Projects</h2>
  <p>Here are some projects I have worked on.</p>
  <a href="#">Close</a>
</div>

<div id="contact" class="panel">
  <h2>Contact</h2>
  <p>You can find me all over the Internet!</p>
  <a href="#">Close</a>
</div>

<div id="blog" class="panel">
  <h2>Blog</h2>
  <p>Here are some blog posts.</p>
  <a href="#">Close</a>
</div>

<a href="#projects">projects</a>
<a href="#blog">blog</a>
<a href="#about">about</a>
<a href="#contact">contact</a>
</div>

CSS:

.container { 
  overflow:hidden;
  position:relative;
  width:100vw;
  height:100vh;
}

.panel{
    min-width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
    z-index: 2;
    -webkit-transition: transform .8s ease-in-out;
    -moz-transition: transform .8s ease-in-out;
    -o-transition: transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

.panel:target {
    -webkit-transition: transform .8s ease-in-out;
    -moz-transition: transform .8s ease-in-out;
    -o-transition: transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

.panel#contact {
    transform: translateX(110%);
    background-color:whitesmoke;
}

.panel#about {
    transform: translateX(-110%);
    background-color: red;
}

.panel#projects {
    transform: translateY(110%);
    background-color: blue;
}

.panel#blog {
    transform: translateY(-110%);
    background-color: gold;
}

.panel#contact:target{
    transform: translateX(0%);

}

.panel#about:target{
    transform: translateX(0%);
}

.panel#projects:target{
    transform: translateY(0%);
}
.panel#blog:target{
    transform: translateY(0%);
}

请注意，"About" 和 "Blog" 链接正在按预期转换，而 "Projects" 和 "Contact" 链接似乎会导致异常。那些是正值的两个。

我真的很难过：

a.) 理解问题到底是什么 b.) 我该如何修复它（如果有的话）

如果有人能解释浏览器现在在处理那些错误的转换并提供解决方案，我将非常感激。 AFAIK，这在每个浏览器中都会发生（无论如何都支持 :target 伪元素）。

如果您需要说明，请告诉我。非常感谢！

更新：未修复，但我注意到如果您将有问题的元素面板（项目 + 联系人）的值设置为 <98%，页面会正确转换，但它不会从屏幕上隐藏。不确定这意味着什么，但如果有帮助...

更新 2.0：感谢您的评论，伙计们！我尝试添加一个容器，并更新了 HTML 和 CSS 以反映这一点。有问题的变化是包装面板的容器 div，以及该容器的以下 CSS：

.container { 
  overflow:hidden;
  position:relative;
  width:100vw;
  height:100vh;
}

我仍然有类似的行为 -- 这也在 Codepen 中更新。我想我现在明白了这个问题，但我不太确定为什么在应用转换之前页面仍然跳转到有问题的元素。我可以想象有一些 hacky 方法可以解决这个问题，但我宁愿用 "right" 方式来做。

Answer 1

我决定使用 :target 并尝试让它成为纯粹的 CSS 并不是正确的方法，最后只是以一种相当直接的方式使用 Javascript。

经验教训：除非你真的必须这样做，否则不要尝试使用纯 CSS 做事。

CSS3 转换，使用 translateX + translateY 设置为正值，似乎没有正确转换

CSS3 transitions, using translateX + translateY set to positive values, do not appear to transition properly

css

css-transitions

css-transforms