                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3 3D 特效

為什么我的perspective-origin設(shè)置為bottom。正方形卻還是按照默認(rèn)的方式(perspective-origin:50% 50%;)翻轉(zhuǎn)。

<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);?*/
}