1
Ich habe eine Website, wo Diamanten oben auf der Seite behoben sind. Jeder Diamant ist eine Div-Box, die mithilfe der CSS-Transformationseigenschaft gedreht und positioniert wird.machen Elemente reaktionsfähig mit CSS Transform Eigenschaft
Die Diamanten reagieren nicht mit der Site ist auf eine kleinere Größe skaliert, und ich habe Probleme, es reagieren zu bekommen, während immer noch in den richtigen Positionen.
Ich habe versucht, Medienabfragen zu verwenden, um die Breite/Höhe der Diamanten und der Diamantenbehälter festzulegen, aber das stört die Position jedes Diamanten.
Sie können die Website sehen hier: http://amberrein.wpengine.com/
hier ist mein HTML:
<div id="diamonds">
<div class="diamond diamond-1">
<div class="fill blank"></div>
</div>
<div class="diamond diamond-2">
<div class="fill blank"></div>
</div>
<hr>
<div class="diamond diamond-3">
<div class="fill logo">
<a href="#"><img src="https://amberrein.wpengine.com/wp-content/uploads/2017/03/Logo.png"></a>
</div>
</div>
<div class="diamond diamond-4">
<div class="fill blank"></div>
</div>
<div class="diamond diamond-5">
<div class="fill blank"></div>
</div>
<div class="diamond diamond-6">
<div class="fill blank"></div>
</div>
<div class="diamond diamond-7">
<div class="fill blank"></div>
</div>
<div class="diamond diamond-8">
<div class="fill book-now">Book Now</div>
</div>
<div class="social-diamonds">
<div class="facebook">
<a href="#"><i class="fa fa-facebook fa-fw fa-lg"></i></a>
</div>
<div class="twitter">
<a href="#"><i class="fa fa-twitter fa-fw fa-lg"></i></a>
</div>
<div class="instagram">
<a href="#"><i class="fa fa-instagram fa-fw fa-lg"></i></a>
</div>
<div class="google">
<a href="#"><i class="fa fa-google-plus fa-fw fa-lg"></i></a>
</div>
</div>
</div>
Hier mein CSS ist:
#diamonds {
background: transparent;
width: 100%;
max-width: 340px;
height: 455px;
position: fixed;
left: 0;
top: 0;
animation: 1.5s fadeInTop ease-in-out;
}
.admin-bar #diamonds {
top: 32px;
}
.diamond {
width: 150px;
height: 150px;
}
.diamond.diamond-7 {
width: 160px;
height: 160px;
}
.diamond.diamond-8 {
width: 75px;
height: 75px;
}
.fill {
width: 100%;
height: 100%;
box-sizing: border-box;
position: absolute;
display: block;
}
.logo img {
max-width: 150px;
width: 100%;
transform: rotate(-45deg) translate(-26px,10px);
}
.diamond-1 {
background: #eee;
transform: scale(1,1) rotate(45deg) translate(-106px, 0);
}
.diamond-2 {
background: #888;
transform: scale(1,1) rotate(45deg) translate(-52px, -266px);
}
.diamond-3 {
background: #ddd;
transform: scale(1,1) rotate(45deg) translate(-28px, -82px);
}
.diamond-4 {
background: rgba(85,85,85,0.9);
transform: scale(1,1) rotate(45deg) translate(-134px, -28px);
}
.diamond-5 {
background: rgba(187,187,187,.7);
transform: scale(1,1) rotate(45deg) translate(-80px, -294px);
}
.diamond-6 {
background: rgba(238,238,238,.5);
transform: scale(1,1) rotate(45deg) translate(-186px, -240px);
}
.diamond-7 {
background: transparent;
border: 1px solid #444;
transform: scale(1,1) rotate(45deg) translate(-220px, -427px);
}
.diamond-8 {
background: rgba(0,0,0,.05);
transform: scale(1,1) rotate(45deg) translate(-393px, -743px);
}
.fill.book-now {
transform: scale(1,1) rotate(-45deg) translate(0px,18px);
font-family: 'Cardo';
font-size: 18px;
color: #000;
text-align: center;
}
#diamonds hr {
margin-top: -193px;
visibility: hidden;
}
.social-diamonds {
color: #fff;
z-index: 99999;
position: fixed;
top:-32px;
left:0;
}
.admin-bar .social-diamonds {
top: 0;
}
.social-diamonds a {
color: #fff;
}
.facebook {
color: #fff;
background: #ddd;
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
text-align: center;
line-height: 50px;
transform: scale(1,1) rotate(45deg) translate(347px,-15px);
transition: all 300ms ease-in-out;
}
i.fa-facebook {
transform: scale(1,1) rotate(-45deg);
transition: 300ms linear;
}
.twitter {
color: #fff;
background: #ddd;
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
text-align: center;
line-height: 50px;
transform: scale(1,1) rotate(45deg) translate(347px,60px);
transition: all 300ms ease-in-out;
}
i.fa-twitter {
transform: scale(1,1) rotate(-45deg);
transition: 300ms linear;
}
.instagram {
color: #fff;
background: #ddd;
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
text-align: center;
line-height: 50px;
transform: scale(1,1) rotate(45deg) translate(347px,144px);
transition: all 300ms ease-in-out;
}
i.fa-instagram {
transform: scale(1,1) rotate(-45deg);
transition: 300ms linear;
}
.google {
color: #fff;
background: #ddd;
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
text-align: center;
line-height: 50px;
transform: scale(1,1) rotate(45deg) translate(347px,218px);
transition: all 300ms ease-in-out;
}
i.fa-google-plus {
transform: scale(1,1) rotate(-45deg);
transition: 300ms linear;
}
.facebook:hover, .twitter:hover, .instagram:hover, .google:hover {
background: #aaa;
transition: all 300ms ease-in-out;
}
wo ist Ihre Medien-Anfragen? – scoopzilla
Meines Wissens bedeutet _Responsiveness_, dass sich die Webseite an Ihre Bildschirmgröße anpasst. Das sagt nichts über Animationen aus. Es ist sehr schwierig und ehrlich gesagt nicht sehr nützlich, eine reaktionsfähige Benutzeroberfläche für die Neupositionierung mit Animationen zu erhalten. Können Sie erklären, was Sie brauchen? – Halcyon
Wenn die Werte auf% oder vw/vh gesetzt werden, bleiben die Elemente aufgrund des transform-translate Eigenschaftswerts, der für jedes einzelne div festgelegt ist, immer noch an der Position hängen. Ich versuche, sie korrekt in das Fenster zu bringen wird in der Größe geändert oder jemand sieht die Website auf Handy/Tablet etc. – Trisha