3

我正在测试 y 轴上的徽标旋转，并附带以下内容：http: //jsfiddle.net/MEmnc/

.container { 
  width: 62px;
  height: 91px;
  position: relative;
  perspective: 400px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

#card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


  transform: rotateY( 180deg );
}

#card .flipped {
  transform: rotateY( 180deg );
}

出于某种原因，我无法让它工作。

我希望这个标志在悬停在它上面时旋转。我使用了现有的徽标，但这纯粹是出于测试目的。它需要像http://www.ultranoir.com/en/#!/home/中那样旋转

这也适用于所有浏览器还是使用 jquery 更好？

4

3 回答 3

1

我没有在您提供的链接上看到任何轮换。但我的直觉说试试这个

HTML

<section class="container">
    <div id="card">
        <img src='http://www.ultranoir.com/cdn/gene/image/common/logo/logo_un2_neg.png' alt='Title of image'/>
    </div>
</section>

CSS

.container {
    width: 62px;
    height: 91px;
    position: relative;
    perspective: 400px;
}
#card {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}
#card figure {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
#card img:hover {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(180deg);
    transition-duration: 1.5s;
    -webkit-transition-duration:1s;
}

我没有改变你做的其他课程..

于 2013-07-04T21:17:54.607 回答
1

您可以使用 CSS 毫无问题地做到这一点。但是，您有几件事出了问题。

正确的 CSS 是：

.container { 
  width: 62px;
  height: 91px;
  position: relative;
  perspective: 400px;
    margin: 0px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
      transition: transform 1s;
  transition: -webkit-transform 1s;

}

#card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
    margin: 0px;
}

.container:hover #card {
  -webkit-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

#card .flipped {
  -webkit-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

更新的演示

已编辑

上述demo中存在一些问题；我还在您的视频中注意到您想要动画而不是变换。

带动画的演示（webkit）

于 2013-07-04T21:22:52.957 回答
0

我通过将 img 位置更改为绝对位置并添加一些变换来平移 Z 轴并移除背面禁用器来修复 vals 答案

img {
    position: absolute;
}

img.front {
    z-index: 100;
    transform: translatez(1px);
}

请看这里http://jsfiddle.net/56cy0s4w/

于 2020-03-20T16:30:57.637 回答