Question

我正在尝试让我的主要元素从带有转换的状态开始，当您将鼠标悬停在其上时，它将带有转换。但是，当您将其悬停时，该元素将转换回其原始状态，而无需执行过渡。如果我也将过渡放在主要位置，那么当页面加载过渡时它将进行转换。我希望它在一开始就不会改变。任何帮助都可以。

main {
    width:500px;
    height:300px;
    transform:perspective(1500px) rotateX(50deg);
    transition:transform 2s;
}

main:hover {
    transition:transform 2s;
    transform:perspective(0px) rotateX(0deg);
}

Answer 1

将其包括在主要的正常状态下将解决此问题：

main {
    width:500px;
    height:300px;
    -webkit-transform:perspective(1500px) rotateX(50deg);
            transform:perspective(1500px) rotateX(50deg);
    -webkit-transition:-webkit-transform 2s;
    transition:-webkit-transform 2s;
    -o-transition:transform 2s;
    transition:transform 2s;
    transition:transform 2s, -webkit-transform 2s;
    background: red;
}

main:hover {
    -webkit-transform:perspective(0px) rotateX(0deg);
            transform:perspective(0px) rotateX(0deg);
}

查看fiddle。

在初始悬停时不进行过渡，将其设置为正常状态下没有任何作用：

main {
    width:500px;
    height:300px;
    -webkit-transform:perspective(1500px) rotateX(50deg);
            transform:perspective(1500px) rotateX(50deg);
    background: red;

    -webkit-transition:-webkit-transform 2s;

    transition:-webkit-transform 2s;

    -o-transition:transform 2s;

    transition:transform 2s;

    transition:transform 2s, -webkit-transform 2s;
}

main:hover {
    -webkit-transform:perspective(0px) rotateX(0deg);
            transform:perspective(0px) rotateX(0deg);
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

查看fiddle。

Answer 2

您在开篇文章中给出的示例未显示您在页面重新加载时应用过渡动画所指的问题。

例如：

.main {
    background: #DDD;
    width: 100px;
    height: 80px;
    transition: transform 2s;
    transform: perspective(1500px) rotateX(50deg);
}

.main:hover {
    transform: rotateX(0deg);
}

<div class="main"></div>

这基本上与您的示例相同，并显示了所需的结果。因此，您应该仔细检查是否存在可能误解的其他过渡或导致悬停样式变为活动状态的其他事件。

在当前状态下，无法回答此问题。

Answer 3

从transition: transform 2s;中删除main:hover，并将其放入main中。

.main {
  width: 500px;
  height: 300px;
  background: red;
  transition: transform 2s;
  transform: perspective(1500px) rotateX(50deg);
}

.main:hover {
  transform: rotateX(0deg);
}

<div class="main"></div>

CSS过渡仅以一种方式起作用，并且元素将仅在不进行过渡的情况下还原

3 个答案: