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">
</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>
problem z przejścia w CSS3
Rozpoczął hoho74, Nov 17 2015 08:30
2 replies to this topic
Posted 17 November 2015 - 08:30
Posted 17 November 2015 - 08:42
Wrzuć wszystko do https://jsfiddle.net/ i podaj linka, wtedy będziemy mogli porozmawiać na temat Twojego problemu
webDeveloper
Posted 17 November 2015 - 09:04
podsyłam link https://jsfiddle.net/#&togetherjs=uEfBB8KRNF
teraz powinno byść ok https://jsfiddle.net/hoho74/44cjf8y6/#&togetherjs=Q3KmRcAsUA
Podone tematy
Topic | Forum | Started By | Stats | Last Post Info | |
---|---|---|---|---|---|
[MyDevil.net] Promocja 5000 kont hostingowych za 50% plus darmowa migracja, nowy system IPS, zapowiedź przejścia na Python 3hosting, webhosting, mydevil and 6 more... |
Hosting | MyDevil.Net |
|
||
Problem z wtyczką Yoast SEO 4.5 dla WordPress 4.7.3yoast seo, wordpress, problem and 1 more... |
WordPress | Wojciech - OpinioLogia |
|
||
[Problem] Brak themes.php, plugin-install.php, update-core.php - jakieś porady? |
WordPress | kubri |
|
||
Problem z napisaniem stronyscroll, js |
Javascript | luke99 |
|
||
Problem z pobieraniem |
Propozycje, sugestie, błędy | MalyKoxik |
|
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users