Question

我正在测试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更好？

Answer 1

我没有在你提供的链接上看到任何轮换..但我的直觉说Try this

<强> 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;
}

我没有更改你制作的其他课程。

Answer 2

你可以毫无问题地使用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 );
}

updated demo

EDITED

上述演示存在一些问题;我也在你的视频中注意到你想要一个动画而不是变换。

DEMO with animation (webkit)

Answer 3

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

img {
    position: absolute;
}

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

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

通过y轴旋转徽标360度

3 个答案:

DEMO with animation (webkit)