problem z przejścia w CSS3

Wszystko o HTML, XHTML, XML, CSS.
hoho74
Posty: 1
Rejestracja: 17 lis 2015, 08:15:04
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows

problem z przejścia w CSS3

Postautor: hoho74 » 17 lis 2015, 08:37:39

Witam
Mam problem z przejścia w CSS3, Pod firefox i IE jest wszytko ok ale pod chrome,safari, operą coś jest nie tak. Mimo użycia -webkit- i -o- animacja nie zachowuje się poprawnie. Wygląda jak by wyskakiwała na wierzchm Może ktoś jaka jest tego przyczyna?

<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Kurs CSS3</title>

<style type="text/css">
#clouds {
background: #CBC6AB;
padding-top: 110px;
margin-top: -110px;
}

#clouds .buttons .wrapper {
width: 800px;
margin: 0px auto;
position: relative;
}

#clouds .buttons h2 {
font-size: 70px;
position: absolute;
top: 0px;
left: 0px;
z-index: 4;
left: -28px;
top: -40px;
}


#clouds .buttons .next{
left: 480px;
position: absolute;
top: 520px;
z-index: 0;
}

#clouds .buttons h2, #clouds .title h2 {
font-family: 'pacificoregular';
color: #1080a0;
text-shadow: -3px -2px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=-3, offy=-2;)
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}

#clouds .buttons .btn, #clouds .buttons .viewport, #clouds .buttons .btn .hover {
width: 240px;
height: 240px;
position: relative;
-webkit-border-radius: 50%;
border-radius: 50%;
}

#clouds .buttons .btn {
float: left;
margin-top: 10px;
text-align: center;
margin-left: 20px;
}

#clouds .buttons .btn:before {
width: 250px;
height: 250px;
content: "";
position: absolute;
top: -6px;
left: -6px;
border: 2px dashed #3c3c3c;
-webkit-border-radius: 50%;
border-radius: 50%;
}

#clouds .buttons .viewport {
background: #3c3c3c;
overflow: hidden;
}

#clouds .buttons .btn a {
color: #fff;
}

#clouds .buttons .btn .viewport a {
font-size: 55px;
display: block;
padding-top: 90px;
padding-bottom: 95px;
position: relative;
z-index: 2;
}

#clouds .buttons .btn > a {
font-size: 60px;
display: block;
width: 42px;
height: 42px;
border: 17px solid #3c3c3c;
line-height: 44px;
position: absolute;
z-index: 3;
-webkit-border-radius: 50%;
border-radius: 50%;
}


#clouds .buttons div:nth-of-type(2) .hover, #clouds .buttons div:nth-of-type(2) > a {
background: #1080a0;
}
#clouds .buttons div:nth-of-type(2) > a {
left: -35px;
top: 160px;
}

#clouds .buttons div:nth-of-type(3) .hover, #clouds .buttons div:nth-of-type(3) > a {
background: #ec0808;
}

#clouds .buttons div:nth-of-type(3) > a {
left: 75px;
top: -30px;
}

#clouds .buttons div:nth-of-type(4) .hover, #clouds .buttons div:nth-of-type(4) > a {
background: #09b02c;
}

#clouds .buttons div:nth-of-type(4) > a {
left: 200px;
top: 160px;
}

#clouds .buttons .btn .hover {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
/*-webkit-transform-origin: left 40px 0;
-moz-transform-origin: left 40px 0;
-ms-transform-origin: left 40px 0;
-o-transform-origin: left 40px 0;*/
transform-origin: left 40px 0;
/*-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);*/
transform: rotate(50deg);
/*-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;*/
transition-property: all;
/*-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-ms-transition-duration: 3s;
-o-transition-duration: 3s;*/
transition-duration: 3s;
}

#clouds .buttons .btn:hover .hover {
/*-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);*/
transform: rotate(0deg);

}
/******************************************************************************************/
#clouds .fbox {
width: 785px;
margin: 0 auto;
margin-top: 50px;
color: #3c3c3c;
text-transform: uppercase;
font-size: 25px;
text-align: justify;
line-height: 30px;
text-shadow: -2px -2px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=-2, offy=-1);

}

#clouds .fbox > div:last-child {
padding-right: 0px;
width: 230px;
}

</style>
</head>

<body>

<!--==================================================================================-->

<section id="clouds">
<div class="buttons nav">
<div class="wrapper">
<h2></h2>
<div class="next nav">

</div>

<div class="btn">
<div class="viewport">
<a href="#">123</a>
<div class="hover">&nbsp;
</div>
</div>
<a href="#">+</a>
</div>

<div class="btn">
<div class="viewport">
<a href="#">456</a>
<div class="hover">
</div>
</div>
<a href="#">+</a>
</div>

<div class="btn">
<div class="viewport">
<a href="#">789</a>
<div class="hover">
</div>
</div>
<a href="#">+</a>
</div>

</div>
</div>

<div class="fbox">

</div>

</section>



</body>
</html>
Awatar użytkownika
SławekSławomir
Posty: 74
Rejestracja: 17 lip 2015, 15:37:38
Reputacja: 1
Płeć: Niewybrana
User Agent: Chrome Windows 1280x720

problem z przejścia w CSS3

Postautor: SławekSławomir » 27 lis 2015, 13:19:29

Sprawdź czy właściwości, które używasz wspierane są przez przeglądarki, na których testujesz stronę

http://www.w3schools.com/cssref/css3_browsersupport.asp
metfach
Posty: 4
Rejestracja: 09 lut 2016, 15:44:29
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows 1366x768
Kontakt:

problem z przejścia w CSS3

Postautor: metfach » 09 lut 2016, 15:48:19

Oraz sprawdź czy nie masz jakiś dziwnych ustawień w stylach CSS.

Twój kod jest trochę chaotyczny.

Wróć do „HTML, CSS”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 1 gość