Comment transformer une div pour avoir une perspective 3D inclinée ?

Le problème exposé dans ce sujet a été résolu.

Bonjour,

J’essaye de transformer l’image pour qu’elle corresponde à la div verte mais j’ai quelques difficultés.

aperçu

Je souhaite une vraie transformation 3D et non un mask.

mes attentes

J’ai trouvé un moyen avec ce générateur mais impossible de faire fonctionner l’effet sur mon code. :/

/*transform css3*/ 
#screen { 
    transform: scale(1.0) scaleZ(1.0) rotateX(-16deg);
    transform-origin: 0% 0%;
    perspective: 450;
    perspective-origin: 100% 50%;
}

enter image description here

css :

body {
    height:100%;
    padding:0;
    margin:0;
}

#mask {
    background:url(https://i.stack.imgur.com/cBK0O.png) no-repeat;
    background-size:350px;
    height:200px;
    position:relative;
}

#screen:hover {
    background:url(https://www.actugaming.net/wp-content/uploads/2018/06/Assassins-Creed-Odyssey_Leak_06-10-18_015-1.jpg);
    background-size:100%;
}

#screen {
    position:absolute;
    bottom:38px;
    background:red;
    opacity:0.6;
}
   
#screen { 
    left:70px;
    width:240px;
    height:calc(240px * 9 / 16); /*keep 16/9 !*/
}

/*transform css3*/ 
#screen { 
    transform: scale(1.0) scaleZ(1.0) rotateX(-16deg);
    transform-origin: 0% 0%;
    perspective: 450;
    perspective-origin: 100% 50%;
}

html :

<div id="mask">
<div id="screen"></div>
</div>

Bon vol,

A.

+0 -0

Les règles perspective doivent être dans le parent. ;)

css

body {
  border: 1px solid black;
  display:inline-block;
  padding: 0;
  margin: 0;
}

#mask {
  background: url(https://i.stack.imgur.com/cBK0O.png) no-repeat;
  background-size: 350px;
  height: 200px;
  width: 400px;
  position: relative;
  perspective: 16px;
  /*perspective-origin:45% 1%; /* --> width: 788px*45%=355px*/
  perspective-origin: 355px 2px;
}

#perpectiveorigin {
  height: 6px;
  width: 6px;
  position: absolute;
  background: red;
  left:352px;
  top:-1px;
}

#screen:hover {
  background: url(https://www.actugaming.net/wp-content/uploads/2018/06/Assassins-Creed-Odyssey_Leak_06-10-18_015-1.jpg);
  background-size: 100%;
}

#screen {
  position: absolute;
  bottom: 26px;
  background: red;
  opacity: 0.6;
}

#screen {
  left: 47px;
  width: 252px;
  height: calc(252px * 9 / 16);
  /*keep 16/9 !*/
}


/*transform css3*/

#screen {
  transform: rotateX(-1.05deg);
}

html

<div id="mask">
  <div id="screen"></div>
</div>
<div id="perpectiveorigin"></div>

so

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte