3D Transform (rotateY) in Chrome and Firefox do re

2019-05-10 19:01发布

问题:

I created a CSS 3D Transformation for a logo div within a header of my page. On hover the logo gets rotated. Everything looks fine in Chrome, but Firefox renders it completely different.

I moved the transform origin to the left side of the logo div. When rotating the right side of the div gets "compressed" to get the visual 3D effect. In Firefox the logo div only gets smaller but not "compressed" and you can't see a 3D effect.

The Code:

<!doctype html>
<html lang="de">
<head>
    <meta charset="UTF-8" />
    <title>test</title>
    <style>
        #header {
            width: 940px;
            margin: auto;
            background-color: blue;
            height: 350px;
            position: relative;
            -webkit-perspective: 800;
            -moz-perspective: 800;
        }

        #logo {
            width: 300px;
            height: 80px;
            background-color: red;
            position: absolute;
            top: 50px;
            left: 0px;
            -webkit-transition-duration: 0.25s;
            -webkit-transform-origin: 0% 50%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotate3d(0,1,0,0deg);
            -moz-transition-duration: 0.25s;
            -moz-transform-origin: 0% 50%;
            -moz-transform-style: preserve-3d;
            -moz-transform: rotate3d(0,1,0,0deg);

        }
        #logo:hover {
            -webkit-transition-duration: 0.5s;
            -webkit-transform: rotate3d(0,1,0,45deg);
            -moz-transition-duration: 0.5s;
            -moz-transform: rotate3d(0,1,0,45deg);
        }
    </style>
</head>
<body>
    <div id="header">
        <div id="logo"></div>
    </div>
</body>
</html>

Please try the following JSFiddle: http://jsfiddle.net/4CN5g/

Any idea what I'm doing wrong?