While I found a similar question here, the solutions provided are outdated and do not help in my case.
My issue revolves around a turning page effect that utilizes the CSS properties of transform-style:preserve-3d and perspective to create a 3D page. The turning page effect is animated using keyframes, where buttons trigger the application and removal of styles with each keyframe.
The problem mainly lies with the perspective property – when removed, the 3D effect is lost but it functions properly on both Firefox and Chrome. However, with the perspective set to 1000px, the page turning effect appears distorted in Firefox only. In contrast, Chrome displays the page turning as expected (with the illusion of the page going up while turning). Essentially, the front of the page is red while the back is green.
My goal is to maintain the 3D effect with the perspective set at 1000px and for the page to turn in Firefox resembling how it operates in Chrome.
If anybody has a suitable solution or workaround, I would greatly appreciate it.
function turnLeft() {
page = document.getElementById('page');
page.classList.remove('turnRight')
page.classList.add('turnLeft')
}
function turnRight() {
page = document.getElementById('page');
page.classList.remove('turnLeft')
page.classList.add('turnRight')
}body {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 100vh;
width: 100vw;
background-color: aliceblue;
perspective: 1000px;
}
.page {
position: absolute;
left: 50%;
top: 50%;
height: 50%;
width: 25%;
transform: translateY(-50%) rotateX(25deg);
-moz-transform: translateY(-50%) rotateX(25deg);
border: solid 1px black;
transform-origin: 0% 45%;
transform-style: preserve-3d;
}
.front {
width: 100%;
height: 100%;
backface-visibility: hidden;
background-color: red;
transform-style: preserve-3d;
}
.back {
position: absolute;
box-sizing: content-box;
border: solid 2px #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
background-color: green;
transform-style: preserve-3d;
}
.turnLeft {
-moz-animation: turnPageToLeft 0.4s ease-in 0s 1 normal forwards;
animation: turnPageToLeft 0.4s ease-in 0s 1 normal forwards;
}
.turnRight {
-moz-animation: turnPageToRight 0.4s ease-in 0s 1 normal forwards;
animation: turnPageToRight 0.4s ease-in 0s 1 normal forwards;
}
@keyframes turnPageToLeft {
0% {
transform: translateY(-50%) rotateX(25deg);
}
100% {
transform: rotate3d(0, 1, 0, -180deg) translateY(-51%) rotateX(-25deg) scale(1, 0.99);
}
}
@-moz-keyframes turnPageToLeft {
0% {
transform: translateY(-50%) rotateX(25deg);
}
100% {
transform: rotate3d(0, 1, 0, -180deg) translateY(-51%) rotateX(-25deg) scale(1, 0.99);
}
}
@keyframes turnPageToRight {
0% {
transform: rotate3d(0, 1, 0, -180deg) translateY(-51%) rotateX(-25deg)scale(1, 0.99);
}
100% {
transform: translateY(-50%) rotateX(25deg);
}
}
@-moz-keyframes turnPageToRight {
0% {
transform: rotate3d(0, 1, 0, -180deg) translateY(-51%) rotateX(-25deg)scale(1, 0.99);
}
100% {
transform: translateY(-50%) rotateX(25deg);
}
}<body>
<div id="page" class="page">
<div class="front"></div>
<div class="back"></div>
</div>
<button onclick="turnLeft()">Turn Left</button>
<button onclick="turnRight()">Turn Right</button>
</body>