Autor Zpráva
Fonkey
Profil
#1 · Zasláno: 14. 2. 2013, 20:40:26 · Upravil/a: Fonkey o 41 minut později
Odpovědět Citovat
Ahojte, mám problém s prekrývaním obrázkov, viď. príklad:
http://gabnamci.6f.sk/f67/
Je to len testovacia stránka (obrázky taktiež).
V Mozilla Firefox(ver. 18), Chrome mi to funguje správne (24), ale safari nie. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>gabnamci</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="container">
      <header id="cleaner"></header>
    <div id="content">
        <a href=""><img src="images/1.png" width="310" height="305" id="left" alt="1.A" style="position:relative; z-index:1;"/></a>
        <a href=""><img src="images/2.jpg" width="380" height="442" id="center" alt="2.A" style="position:relative; z-index:2;" /></a>
        <a href=""><img src="images/3.png" width="310" height="380" id="right" alt="3.A" style="position:relative; z-index:1;" /></a>
        <img src="images/floor.png" width="1000" height="130" id="floor" style="position:relative; z-index:0;" />
    </div>
</div>
    <!--
      <footer>
    This page supports the following browsers only
    <a href="">Mozzila Firefox 10.0+</a> 
    <a href="">Chrome 12.0+</a> 
    <a href="">Safary 4.0+</a>
   
  </footer>
  -->
</body>
</html>
body {
    background:#000;
    font-family:"Times New Roman", Times, serif;
}

#container {

    margin:50px auto;
    background:url(images/bg.jpg) no-repeat top;
    
}

#cleaner {
    height:100px;
}

#content {
    margin:auto;
    width:1024px;
}

#left {
    float:left;
    -webkit-transform: perspective(600px) rotateY( -30deg ) translate(100px,10px);
    -moz-transform: perspective(600px) rotateY( -30deg ) translate(100px,10px);
    -o-transform: perspective(600px) rotateY( -30deg ) translate(100px,10px);
    transform: perspective(600px) rotateY( -30deg ) translate(100px,10px);
    transition-duration: .3s;
    -moz-transition-duration: .3s;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;    
}
    
#left:hover {
    -ms-transform: scale(1.2,1.2);
    -o-transform:scale(1.2,1.2);
    -webkit-transform:scale(1.2,1.2);
    transform:scale(1.2,1.2);
    
    
}
    



#center {
    
    float:left;
    -moz-transform:translate(0,-40px);
    transform:translate(0,-40px);
    -o-transform:translate(0,-40px);
    -webkit-transform:translate(0,-40px);
    -ms-transform:translate(0,-40px);
    transition-duration: .3s;
    -moz-transition-duration: .3s;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
}

#center:hover {
    transform:scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform:scale(1.2,1.2);
    -webkit-transform:scale(1.2,1.2);
}
    
#right {
    
    float:left;
    -webkit-transform: perspective( 600px ) rotateY( 30deg ) translate(-90px,10px);
    -moz-transform: perspective( 600px ) rotateY( 30deg ) translate(-90px,10px);
    -o-transform: perspective( 600px ) rotateY( 30deg ) translate(-90px,10px);
    transform: perspective( 600px ) rotateY( 30deg ) translate(-90px,10px);
    -ms-transform:scale(0.9,0.9);
    transition-duration: .3s;
    -moz-transition-duration: .3s;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
}
    
#right:hover {
    transform:scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform:scale(1.2,1.2);
    -webkit-transform:scale(1.2,1.2);
    
}
    
#floor {
    transfrom:translate:(0,-120px);
    -moz-transform:translate(0,-120px);
    -o-transform:translate(0,-120px);
    -webkit-transform:translate(0,-120px);
    -ms-transform:translate(0,-120px);
    filter:alpha=(80);
    opacity:0.7;    
}


a img { 
    border: none;
}
Časová prodleva: 11 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0