为什么可以'；t我用CSS隐藏一个div“-webkit变换：旋转（90度）&引用；？ HTML文档 #容器{ -webkit透视图：300px； -moz透视图：300px； } #内容{ 宽度：300px；高度：300px；背景：红色； -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； }_Css_Transform_Perspective_Css Transforms

为什么可以'；t我用CSS隐藏一个div“-webkit变换：旋转（90度）&引用；？ HTML文档 #容器{ -webkit透视图：300px； -moz透视图：300px； } #内容{ 宽度：300px；高度：300px；背景：红色； -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； }

css

为什么可以'；t我用CSS隐藏一个div“-webkit变换：旋转（90度）&引用；？ HTML文档 #容器{ -webkit透视图：300px； -moz透视图：300px； } #内容{ 宽度：300px；高度：300px；背景：红色； -webkit变换：旋转（90度）； -莫兹变换：旋转（90度）； },css,transform,perspective,css-transforms,Css,Transform,Perspective,Css Transforms,我想通过CSS变换隐藏.contents：rotateY（90度）。但是上面的代码不能正常工作。如果我删除CSS透视图，它会正常工作。但是我需要CSS透视图当我在.container中设置CSS透视图时，如何成功地将.contents在Y轴上旋转90度谢谢。显然，您的透视原点是错误的（即，相对于rotateY（）），它是离轴的。添加-webkit-perspective-origin-x:150px似乎可以做到这一点：。顺便说一句，这样做的原因是它将透视“摄影机”移动到div的中间（300p

我想通过CSS

变换隐藏.contents
：rotateY（90度）。但是上面的代码不能正常工作。如果我删除CSS透视图
，它会正常工作。但是我需要CSS透视图

当我在.container
中设置CSS透视图时，如何成功地将.contents
在Y轴上旋转90度
谢谢。
显然，您的透视原点是错误的（即，相对于rotateY（）
），它是离轴的。添加-webkit-perspective-origin-x:150px
似乎可以做到这一点：。顺便说一句，这样做的原因是它将透视“摄影机”移动到div的中间（300px/2），如果没有指定变换原点，这是变换的默认旋转点。
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<style>
    #container {
        -webkit-perspective: 300px;
        -moz-perspective: 300px;
    }
    #contents {
        width: 300px;
        height: 300px;
        background: red;
        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
    }
</style>
<div id="container">
    <div id="contents"></div>
</div>