Skocz do zawartości

Zdjęcie
- - - - -

problem z przejścia w CSS3


2 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
hoho74
0
Neutralna

Napisano 17 listopada 2015 - 08:30

#1

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>


  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 17 listopada 2015 - 08:42

#2

Wrzuć wszystko do https://jsfiddle.net/ i podaj linka, wtedy będziemy mogli porozmawiać na temat Twojego problemu :)


  • 0

webDeveloper


hoho74
0
Neutralna

Napisano 17 listopada 2015 - 09:04

#3

podsyłam link https://jsfiddle.net/#&togetherjs=uEfBB8KRNF


teraz powinno byść ok https://jsfiddle.net/hoho74/44cjf8y6/#&togetherjs=Q3KmRcAsUA


  • 0





Podone tematy Collapse

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych