Толщина при создании эффекта переворота в CSS JavaScript? ⇐ Html

[Anonymous]

Я хочу придать эффект толщины, когда изображение переворачивается и появляется другое изображение. Я хочу придать ему толщину, чтобы он выглядел как монета. Вот ссылка, где кто-то пробовал что-то подобное, но я не могу интегрировать его в свой код:

Код: Выделить всё

function switchVisible() {
if (document.getElementById('mapButtons')) {

if (document.getElementById('mapButtons').style.display == 'none') {
document.getElementById('mapButtons').style.display = 'block';
document.getElementById('modelButtons').style.display = 'none';

}
else {
document.getElementById('mapButtons').style.display = 'none';
document.getElementById('modelButtons').style.display = 'block';
}
}
}

function flip() {
$('.side').toggleClass('rotated');
}

Код: Выделить всё

#modelButtons {
display: none;
}
.block {
width: 100%;
height: 100%;
-webkit-perspective:100%;
-moz-perspective:100%;
-ms-perspective:100%;
-o-perspective:100%;
perspective:100%;

}
.side {
position: absolute;
-webkit-transition:-webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.side.rotated {

-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
}
.back {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
#flip-button,button {
width: 98px;
height: 70px;
background: white;
border:none;
outline:none;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
border: 0;
}
.changeButton img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.changeButton:hover img {
opacity: .5;
}
.prevButton img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.prevButton:hover img {
opacity: .5;
}
.nextButton img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.nextButton:hover img {
opacity: .3;
}
.notbutton{
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
#mapButtons{
clear: left;
}

Код: Выделить всё

[img]http://i.imgur.com/xQI1YEb.png[/img]



[img]http://i.imgur.com/EDjVcP4.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/360 ... javascript