Realizeaza o rotatie 3D a unei imagini

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Realizeaza o rotatie 3D a unei imagini

Mesaj Scris de Keir la data de Dum 26 Aug - 20:21

Rotatie 3D a unei imagini


Rotatie 3D a unei imagini:
● Demo 1
● Demo 2

Coduri:

1)Codul pentru efectul din "Demo1"
Cod:
<style>
div.flip{
position:relative;
width: 300px; /* Set default width of flip */
height: 250px; /* Set default height */
-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}

div.flip div.rotate > *{ /* Target all children elements */
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

div.flip div.rotate > div{ /* Target all child DIVs */
-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}
div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
background-color: transparent;
}
div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.rotate.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

</style><div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


   <img src="http://i41.servimg.com/u/f41/12/51/77/36/help1110.png">



   <div>
      Forumul forumurilor este forumul de suport oficial al comunitatii de administratori si utilizatori ai serviciului Forumgratuit. Aici puteti solicita si oferi ajutor utilizatorilor, puteti propune diverse sugestii sau puteti face pur si simplu schimb de opinii cu privire la caracteristicile serviciului nostru.<br /><br />
      <img src="http://www.illiweb.com/fa/banner/ro/banner6.jpg" style="margin:0 auto" />
   </div>


</div>

2)Codul pentru efectul din "Demo2"
Cod:
<style>
div.flip{
position:relative;
width: 300px; /* Set default width of flip */
height: 250px; /* Set default height */
-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}
div.flip div.rotate > *{ /* Target all children elements */
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

div.flip div.rotate > div{ /* Target all child DIVs */
-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}

div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
background-color: transparent;
}


div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}


div.rotate.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}


div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

</style>

</div><div class="flip" style="width: 468px; height: 60px; display: inline-block;"><div class="rotate y">

   <img src="http://www.illiweb.com/fa/banner/ro/banner1.gif">


   <img src="http://www.illiweb.com/fa/banner/ro/banner2.gif">


</div>
</div>

Aplicarea efectului:

1) In pagini HTML:
Panou de Administrare Module Administrare pagini HTML   Creeaza o noua pagina HTML


Apoi treceti codul dorit (Demo1 sau Demo1). Nu uitati sa apasati pe Inregistrare .


2) In generalitati, mesaj pe pagina de start:
Panou de Administrare Afisare Generalitati  Mesaj pe pagina de start


Apoi treceti codul dorit (Demo1 sau Demo1). Nu uitati sa apasati pe Inregistrare .


2) Intr-un subiect:
Panou de Administrare Afisare Foaie de stil CSS


Exclamare Cerinte:
● HTML activat pe forum ( Panou de administrare > General > Mesaje si emailuri > Configurare > Permite HTML : [Da] )
● HTML activat din profil ( Profil > Preferinte > Autorizeaza intotdeauna HTML : [Da] )

Adaugati acest cod in CSS:

Cod:
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}

div.flip div.rotate > *{ /* Target all children elements */
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

div.flip div.rotate > div{ /* Target all child DIVs */
-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}

div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
background-color: transparent;
}


div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}


div.rotate.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}


div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

div.flip{
position:relative;
width: 300px; /* Set default width of flip */
height: 250px; /* Set default height */
-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}

Intr-un subiect, adaugati urmatorul cod, dupa preferinte:

● Codul pentru efectul din Demo1:
Cod:
<div class="flip" style="width: 200px; height: 200px; display: inline-block;"><div class="rotate x"><img src="http://i41.servimg.com/u/f41/12/51/77/36/help1110.png"><div>Forumul forumurilor este forumul de suport oficial al comunitatii de administratori si utilizatori ai serviciului Forumgratuit.<br /><br />
      <img src="http://www.illiweb.com/fa/banner/ro/banner6.jpg" style="margin:0 auto" />
   </div></div></div>
Explicatii:

width: 200px; height: 200px - Inaltime/latime imagine
<img src="URL"> - Imagine

● Codul pentru efectul din Demo2:
Cod:
<div class="flip" style="width: 468px; height: 60px; display: inline-block;"><div class="rotate y"><img src="http://www.illiweb.com/fa/banner/ro/banner1.gif"><img src="http://www.illiweb.com/fa/banner/ro/banner2.gif"></div></div>

Explicatii:

width: 468px; height: 60px - Inaltime/latime imagine. Atentie: Amblele imagini trebuie sa aiba aceeasi dimensiune.
<img src="URL1"> - Prima imagine
<img src="URL2"> - A doua imagine


Acest tutorial a fost scris de catre Alexader.
Sursa: CSS Dynamic Drive

Copyright ˆ Forumgratuit.ro Nicio parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Keir
Membru onorific
Membru onorific

masculin

Mesaje : 6769
Varsta : 19
Localizare : Buzau
Data înscrierii : 28/12/2011
Multumiri : 68
Niciun avertisment

http://neotalk.wikiforum.ro/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum