我制作了一个正方形网格并将它们旋转 45 度使其成为菱形，但是当我将其悬停以通过 CSS transform 属性对其进行缩放时，菱形在悬停时再次变为正方形。我不希望菱形变回正方形。你还可以看到正方形的一部分隐藏在下面的行中。
这是我的 CSS 代码
.square {
width: 150px;
height: 150px;
background-color: white;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .16);
transform: rotate(45deg);
transition: all 0.3s ease-in-out;
}
.square:hover {
transform: scale(1.5);
}
.panel {
background: transparent;
margin-top: 50px;
}
.r2 {
transform: translateX(148px) translateY(-70%);
}
.r3 {
transform: translateY(-148%);
}
.row {
margin-top: 50px;
}
这是我的html
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
</div>
<div class="row r2">
<div class="panel">
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
</div>
</div>
<div class="row r3">
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
</div>
</div>
最佳答案
你只需要将转换函数放在同一个声明中:
即:
.square:hover {
transform: scale(1.5) rotate(45deg);
}
这是一个working fiddle
希望对您有所帮助。
关于html - 为什么悬停时菱形会变成正方形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39191380/