![]() ![]() |
![]() /* 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>
|