前端 - 为什么CSS transform-origin 属性在 Chrome 和 Safari 中得到完全不同的效果?
PHPz
PHPz 2017-04-17 11:32:01
0
1
858

查明了,应该是Safari下transform-origin在z轴上的bug。。这个bug已经提出了好几年了,仍然没有解决,并且有相当一部分人认为也许苹果是对的(http://stackoverflow.com/a/10420268)

CSS3 的 transform-origin 属性,用计算之后的属性测试,在Chrome上一切正常,在Safari上就出现了很奇怪的问题。。

代码在这儿 https://jsfiddle.net/uecf3ccd/1/

HTML代码:

<p id="stage">
    <p id="prev">prev</p>
    <p id="this">this</p>
    <p id="next">next</p>
</p>

CSS代码:

#stage {
    width: 900px;
    height: 300px;
    perspective: 600px;
    -webkit-perspective: 600px;
}

#stage p {
    position: fixed;
    left: 300px;
    width: 300px;
    height: 300px;
    background-color: aquamarine;
    transform-origin: 50% 50% -300px;
    -webkit-transform-origin: 50% 50% -300px;
}

#next {
    transform: rotateY(60deg);
}

#prev {
    transform: rotateY(-60deg);
}

Chrome下的显示:

Safari下的显示:

不知道是我哪里写错了呢,有没有一种办法能让两种浏览器显示的效果是相同的。。

PHPz
PHPz

学习是最好的投资!

모든 응답(1)
大家讲道理

你没有写错,不同的浏览器对css样式的支持,是有一些差异,这是浏览器的问题

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿