Currently, I have been working on a website that showcases a 3D book:
https://i.sstatic.net/oC1nL.png
The challenge I am facing is to ensure support for both png
and webp
images across all browsers. Initially, when I load just one image, everything works perfectly:
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 600px;
}
@keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-30deg);
}
}
/* CSS code continued */
However, the problem arises when I introduce the picture element to accommodate both formats as the image loses its resizing capabilities:
https://i.sstatic.net/2WsJe.png
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 600px;
}
@keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-30deg);
}
}
/* Continued CSS styling */
I suspect the issue may lie within this segment of the code:
.book > :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 200px;
height: 320px;
transform: translateZ(25px);
background-color: #01060f;
border-radius: 0 2px 2px 0;
box-shadow: 5px 5px 20px #E5E4E2;
}
If you wish to review the complete snippet, feel free to check it out here:
https://jsfiddle.net/p01vac52/1/
Considering the complications introduced by the picture element, should I explore altering the image source using JS instead? Your insights would be greatly appreciated.