Question

我制作了一个正方形网格并用45度旋转它们以使其成为菱形，但是当我将其悬停以通过CSS变换属性进行缩放时，钻石在悬停时再次变为正方形。我不希望钻石变回正方形。而且你也可以看到广场的某些部分隐藏在下面的行中。

这是我的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>

http://codepen.io/yash51/pen/VjoQLr

Answer 1

您只需将转换函数放在同一声明中：

即。：

.square:hover {
    transform: scale(1.5) rotate(45deg);
}

这是working fiddle

希望它有所帮助。

Answer 2

您可以尝试更改

.square:hover {
  transform: scale(1.5);
}

到

.square:hover {
  transform: scale(1.5) rotate(45deg);
}

因为变换的属性不匹配。您必须将您的第一个属性包含在：悬停。

我在http://codepen.io/anon/pen/akZqOm

中尝试此解决方案

此解决方案来自https://stackoverflow.com/a/10765771/3808304

PS。我英语不好。我希望你能理解我:)。

为什么钻石在悬停时会变成正方形？

2 个答案: