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

【问题标题】：Why is a diamond changing to a square on hover?为什么钻石在悬停时变成正方形？
【发布时间】：2017-01-04 14:34:06
【问题描述】：

我制作了一个正方形网格并将它们旋转 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

【问题讨论】：

请给我们一个jsfiddle，它会更容易帮助你。
@ZombieChowder 我提供了代码笔链接

标签： html css twitter-bootstrap css-shapes

【解决方案1】：

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

即：

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

这是working fiddle

希望对你有帮助。

【讨论】：

非常感谢兄弟:)

【解决方案2】：

你可以尝试改变

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

到

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

因为变换的属性不匹配。您必须在 :hover 中包含您的第一个属性。

我在http://codepen.io/anon/pen/akZqOm尝试这个解决方案

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

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

【讨论】：