为什么我的perspective-origin设置为bottom。正方形却还是按照默认的方式(perspective-origin:50% 50%;)翻转。

来源:-

Desoer

2015-11-20 00:58

<div class="container">3</div>
.container{
    width: 300px;
    height: 300px;
    background: #2B1919;
    margin: 50px auto;
    text-align: center;
    line-height: 300px;
    font-size: 250px;
    color: #91A7A8;
}
.container{
    -webkit-perspective:0;
    -webkit-perspective-origin:bottom;
    -webkit-transform-style:perspective-3d;
    -moz-perspective:0;
    -moz-perspective-origin:bottom;
    -moz-transform-style:perspective-3d;
    perspective:0;
    perspective-origin:bottom;
    transform-style:perspective-3d;
    overflow: hidden;
    transition:1s ease-in-out 0.1s;
}
.container:hover{
    -webkit-transform:rotateX(90deg);
    /* -webkit-transform:rotateY(90deg); */
    /* -webkit-transform:rotateZ(90deg); */
    -moz-transform:rotateX(90deg);
    /* -moz-transform:rotateY(90deg);
    -moz-transform:rotateZ(90deg); */
    transform:rotateX(90deg);
    /* transform:rotateY(90deg);
    transform:rotateZ(90deg); */
}


写回答 关注

1回答

  • 戴眼镜的粉红兔子
    2015-11-21 13:43:12

    有一种可能是浏览器的支持原因,这个属性目前浏览器都不支持,但是chrome和safari支持替代的 -webkit-perspecitve-origin 属性。

CSS3 3D 特效

使用CSS3当中的属性,创建真实可用的三维效果

78574 学习 · 425 问题

查看课程

相似问题