В настоящее время у меня есть следующий CSS, он работает в Google Chrome (Webkit), но не в любом другом браузере.
Как лучше всего сделать это совместимым со всем?
Как видите, он использует webkit, но я не уверен, что такое эквиваленты moz.
Большое спасибо
.card{
margin-top: -50px;
}
.card {
width: 286px; height: 224px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
}
.container:hover .card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.megatron {
float: left; top: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.megatron .front {
}
.megatron .back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.megatron .back h2 {
background: url(megatron-title.png); text-indent: -9999px;
}
.megatron img {
float: right;
}