3

I'm making a 3D Carousel. Here is my code : 3D Carousel. 

#wrapper{
  width:420px;
  height:279px;
  position:relative;
  margin:40px auto 40px auto;
  -webkit-perspective: 800px;
  perspective: 800px;
}

.carrousel{
  position:absolute;
  width:100%;
  height:266px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

.plan{
  position:absolute;
  height: 100%;
  width: 400px;
  text-align:center;
  line-height: 60px;
  font-size: 24px;
  color:#FFF;
  top:100px;
  left: 5px;
  opacity: 1

}

First you can see my carousel and then picture I would like to display.

I wonder why my pictures and my text are blurry ?

I have tried lots of CSS properties like backface-visibility or -webkit-font-smoothing in different class. But I have always the same issue, pictures and text are blurry.

Does anyone know a solution to display it correctly ?

Thank you very much !

Elie
  • 33
  • 3
  • 2
    It seems it comes from the `translateZ` which basically makes a zoom of what is rendered **AT FIRST**, so even if your picture is 10MB, if it's rendered small, you'll zoom on some small definition pic :( This is my understanding, but i don't have a solution though, i'll try to search a bit for it, it's quite interesting! – sjahan Nov 08 '17 at 09:32
  • https://stackoverflow.com/questions/32628091/css-bad-rendering-in-translatez-vs-scale/32698721 Actually, scale will kind of redraw it while translate will move your element (if small def, it will stay small def). But scale is 2d, maybe try to 3d version if this works better! – sjahan Nov 08 '17 at 09:34
  • @sjahan - "But scale is 2d, maybe try to 3d version". I have never used scale3D... Could you give me advices to use it ? – Elie Nov 08 '17 at 09:59
  • Beside the docs https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d, i would not have a perfect advice to give you and i must go to a meeting right now :/ if something comes in mind, i'll reply for sure ;) – sjahan Nov 08 '17 at 10:09

0 Answers0