css - 请查看代码-CSS3 旋转也转换文本

Question

以下代码有问题。请帮我解决

代码

<div class="mosaicflow__item">
  <h3>has been the industry's standar</h3>           
</div>

css

.mosaicflow__item:hover{
    transform: rotateX(180deg);
    transform-style: preserve-3d;
    transition: all 1.0s linear 0s;
    background: #faffeb;
   }

它<h3>也在旋转。所以旋转后无法阅读。

谢谢

Answer 1

嗨 vixon 是的，它旋转了父母和他所有的孩子。所以由于 h3 是孩子，它也会旋转

演示：http: //jsfiddle.net/6FQLX/

标记：

<div class="mosaicflow__item">
    <h3>has been the industry's standar</h3>  
</div>            

样式：

.mosaicflow__item{
    -webkit-transform-style: preserve-3d; 
       -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d; 
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d; 
    -webkit-perspective: 800px;  
     -moz-perspective: 800px;  
      -ms-perspective: 800px; 
       -o-perspective: 800px; 
          perspective: 800px;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition: all 1.0s linear 0s;
    -moz-transition: all 1.0s linear 0s;
    -ms-transition: all 1.0s linear 0s;
    -o-transition: all 1.0s linear 0s;
    transition: all 1.0s linear 0s;
    background: #faffeb;
    position:relative;
   }
.mosaicflow__item:hover{
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
   }

在这里阅读更多http://dev.opera.com/articles/view/understanding-3d-transforms/