  |
|
|
 /* inutile ici evidemment */
rotazione centrale  qui scrivi un altro contenuto. rotazione Verticale  qui scrivi un altro contenuto. rotazione Orizontale  qui scrivi un altro contenuto.. Modifica il Css altre regolazioni  qui scrivi un altro contenuto. (modifica, sfondo nel suo Css) |
ESEMPIO Css: copia codice: Head
#f1_container {
position: relative;
margin: 10px auto;
width: 192px;
height: 192px;
z-index: 1;
background-color: #F2D9E4;
border:1px solid #cccccc;
border-radius:30px;
}
#f1_container {
perspective: 500px;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.5s linear;
}
#f1_container:hover #f1_card {
transform: rotateZ(360deg);
border-radius: 30px;
box-shadow: 5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back1 {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #217285;opacity:0.9;
border-radius:30px;
}
#f2_container {
position: relative;
margin: 10px auto;
width: 192px;
height: 192px;
z-index: 1;
background-color: #D0E0F0;
border:1px solid #cccccc;
border-radius:30px;
}
#f2_container {
perspective: 500px;
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
transform: rotateX(180deg);
border-radius: 30px;
box-shadow: 5px -5px 5px #aaa;
}
.face.back2 {
display: block;
transform: rotateX(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #217285;opacity:0.9;
border-radius:30px;
}
#f3_container {
position: relative;
margin: 10px auto;
width: 128px;
height: 192px;
z-index: 1;
background-color: #EDB8F5;
border:1px solid #cccccc;
border-radius:30px;
}
#f3_container {
perspective: 500px;
}
#f3_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f3_container:hover #f3_card {
transform: rotateY(180deg);
border-radius: 30px;
box-shadow: -5px 5px 5px #aaa;
}
.face.back3 {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #3A1B52;opacity:0.9;
border-radius:30px;
}
#f4_container {
position: relative;
margin: 10px auto;
width: 192px;
height: 192px;
z-index: 1;
background-color: #D0ECF0;
border:1px solid #cccccc;
border-radius:30px;
}
#f4_container {
perspective: 500px;
}
#f4_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f4_container:hover #f4_card {
transform: rotateY(180deg);
border-radius: 30px;
box-shadow: -5px 5px 5px #aaa;
}
.face.back4 {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #15434F;opacity:0.9;
border-radius:30px;
}
#f5_container {
position: relative;
margin: 10px auto;
width: 256px;
height: 192px;
z-index: 1;
background-color: #FCE1CD;
border:1px solid #cccccc;
border-radius:30px;
}
#f5_container {
perspective: 500px;
}
#f5_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f5_container:hover #f5_card {
transform: rotateY(180deg);
border-radius: 30px;
box-shadow: -5px 5px 5px #aaa;
}
.face.back5 {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #702F10;opacity:0.9;
border-radius:30px;
}
ESEMPIO Css: copia codice Body
<div style="margin-right:50px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face"><img src="star.png"
/></div>
<div class="back1 face center"> /* inutile ici evidemment
*/
</div>
</div>
</div>
<p
style="text-align:center;"><strong><span
style="font-size:14px;">rotazione
centrale</span></strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f2_container">
<div id="f2_card">
<div class="front face"><img src="global.png"
/></div>
<div class="back2 face center">
<p><span style="font-size:14px;">qui scrivi
un altro contenuto.</span></p>
</div>
</div>
</div>
<p
style="text-align:center;"><strong><span
style="font-size:14px;">rotazione
orizontale</span></strong></p>
</div>
<div style="margin-top:20px;
clear:both;"></div>
<div style="margin-right:10px; display: inline-block;">
<div id="f3_container">
<div id="f3_card">
<div class="front face"><img src="folder128.png"
/></div>
<div class="back3 face center">
<p><span style="font-size:14px;">qui scrivi
un altro contenuto.</span></p>
</div>
</div>
</div>
<p
style="text-align:center;"><strong><span
style="font-size:14px;">rotazione
verticale</span></strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f4_container">
<div id="f4_card">
<div class="front face"><img src="compose.png"
/></div>
<div class="back4 face center">
<p><span style="font-size:14px;">qui scrivi
un altro contenuto..</span></p>
</div>
</div>
</div>
<p
style="text-align:center;"><strong><span
style="font-size:14px;">Con delle regolazioni
differenti</span></strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f5_container">
<div id="f5_card">
<div class="front face"><img src="document256.png"
/></div>
<div class="back5 face center">
<p><span style="font-size:14px;">qui scrivi
un altro contenuto.</span></p>
</div>
</div>
</div>
<p
style="text-align:center;"><strong><span
style="font-size:14px;">(tailles, fond di
back-face...)</span></strong></p>
</div>
|
|
