2
votes

Comment puis-je transformer un div en une perspective inclinée?

J'essaye de transformer ma div comme la boîte verte.

Je veux obtenir une transformation 3D, pas un masque: p>

Je trouve un moyen avec ce générateur mais le code css ne fonctionne pas sur mon violon:

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

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%;
}

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

html css css-transforms

2 commentaires

fonctionne dans Firefox, si ce que vous voulez est exactement ce que vous montrez ci-dessus. si vous le voulez sur l'autre div, vous devez y mettre le style.

Je veux avoir ma photo comme la div verte

4 Réponses :

2
votes

Vous pouvez essayer d'utiliser transform: skew , il s'agit d'un lien pour W3Schools expliquant la transformation skew , pour votre div vous pouvez ajouter cette ligne

#screen {
    transform: scale(1) skew(23deg);
}

1 commentaires

Je ne peux pas déformer ma div avec ça. : /

4
votes

Si vous voulez cette forme, vous pouvez utiliser clip-path au lieu d'utiliser transform . Cela vous donne un grand contrôle sur la forme que vous obtenez. Voici un bon outil pour vous aider: https://bennettfeely.com/clippy/

En utilisant transform , vous pouvez incliner l'image pour obtenir un effet 3D sur le contenu d'arrière-plan / div.

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

#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;
  background: red;
  opacity: 0.6;
  left: 70px;
  width: 240px;
  height: calc(240px * 9 / 16);
  /*keep 16/9 !*/
  
  transform-origin: bottom right;
    -ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
}

4 commentaires

C'est bien, je peux également utiliser la propriété mask pour ce faire, mais j'ai besoin d'une transformation 3D pour obtenir un effet 3D sur mon contenu d'arrière-plan / div.

@ A-312 Je vois ce que vous voulez dire maintenant, j'ai mis à jour ma réponse pour vous :-) J'espère que cela vous aidera.

Mais le coin supérieur gauche et le coin supérieur droit se déplacent ensemble. : /

Sur westciv.com/tools/3Dtransforms/index.html je trouve quelque chose mais je peux J'ai pas la même chose sur mon code. : /

3
votes

Vous avez besoin d'une rotation et aussi d'une perspective pour avoir le bas à droite comme origine. Notez que la perspective doit être appliquée à un élément parent:

<div class="box">
  <img src="https://www.actugaming.net/wp-content/uploads/2018/06/Assassins-Creed-Odyssey_Leak_06-10-18_015-1.jpg">
</div>

img {
  margin: 30px 50px;
  transform: perspective(100px) rotateX(-8deg);
  width: 250px;
  transform-origin: bottom right
}

Ou utilisez la perspective à l'intérieur de la transformation et ajustez l'origine de la transformation et non l'origine de la perspective:

<div class="box">
<img src="https://www.actugaming.net/wp-content/uploads/2018/06/Assassins-Creed-Odyssey_Leak_06-10-18_015-1.jpg" >
</div>

.box {
  display:inline-block;
  perspective-origin:bottom right;
  perspective:100px;
}

img {
  margin:30px 50px;
  transform:rotateX(-8deg);
  width:250px;
}

1 commentaires

OH! les propriétés de perspective doivent figurer dans les règles parentes!

0
votes

Comme je l'ai dit dans mon commentaire . Je ne mets pas la propriété perspective dans la bonne direction! Avec quelques modifications, j'ai obtenu le bon rendu:

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

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%;*/
  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);
}

0 commentaires