1
我有一个网站的钻石固定在页面的顶部。每个菱形是一个使用CSS变换属性旋转和定位的div盒。使元素响应CSS变换属性
钻石没有反应，网站缩小到一个较小的尺寸，我有麻烦让它响应，同时仍然保持在正确的位置。
我试过使用媒体查询来设置钻石和钻石容器的宽度/高度，但是这破坏了每颗钻石的位置。
您可以查看这里的网站：http://amberrein.wpengine.com/
这里是我的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>
这里是我的CSS：
#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;
}
哪里是你的媒体查询？ – scoopzilla
据我所知，_responsiveness_意味着网页会根据您的屏幕尺寸进行调整。这并没有说动画的任何内容。获取响应式用户界面以重新定位动画看起来非常困难，并且实际上不是非常有用。你能澄清你需要什么吗？ – Halcyon
当将值设置为％或vw/vh时，由于为每个单独的div设置了transform -translate属性值，所以元素仍然处于“卡住”位置，我试图让它们在窗口正确定位时被调整大小或有人浏览移动/平板电脑等网站 – Trisha