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

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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
Auteur du sujet

Cette réponse a aidé l’auteur du sujet

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

Édité par A-312

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

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