Html 为什么一颗钻石在悬停时会变成正方形？_Html_Css_Twitter Bootstrap_Css Shapes

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

html css twitter-bootstrap

Html 为什么一颗钻石在悬停时会变成正方形？,html,css,twitter-bootstrap,css-shapes,Html,Css,Twitter Bootstrap,Css Shapes,我制作了一个正方形网格，并将它们旋转45度使其成为菱形，但当我悬停它以通过CSS变换属性缩放它时，菱形再次变为悬停的正方形。我不想让钻石变成正方形。你们也可以看到正方形的一部分隐藏在下面一行中这是我的CSS代码 .square { width: 150px; height: 150px; background-color: white; box-shadow: 1px 1px 5px rgba(0, 0, 0, .16);

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

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

i、 e:

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

这是一个

希望有帮助。

你可以尝试改变

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

到

因为转换的属性不匹配。必须将第一个属性包括到：hover

我试着用这种方法来解决这个问题

这个解决方案来自

另外，我的英语不好。我希望你能理解我：）

请给我们一个jsfiddle，这样会更容易帮助你。@ZombieChowder我提供了代码笔链接非常感谢兄弟：）

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