html - css3，“transform: scale()”的变体不适用于除 Firefox 之外的任何浏览器

Question

我目前正在使用 Vue CLI 3。在 css 中，我设置了一个悬停脚本，当悬停在 div 上时，它会将比例增加 10%。我有：

(this.boxData.scaleOnHover ? 
`-webkit-transform: scale(${this.scale}%);
-moz-transform:    scale(${this.scale}%);
-ms-transform:     scale(${this.scale}%);
-o-transform:      scale(${this.scale}%);
transform:         scale(${this.scale}%);` 
: "");

其他CSS：

        * {
            background: none;
            background-color: none;
        }

        .textbox {
            border-color: #d3d3d3;
            border-radius: 40px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            display: inline-block;
            vertical-align: top;
            margin: 10px;
            padding: 10px;
            background-color: #ffffff;
        }

        img {
            border-radius: 100px;
            text-align: center;
        }

        p {
            font-size: 1em;
            margin-bottom: 10px;
            color: #000000;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 0.25em;
            color: #1b941e;
            text-align: center;
        }

        h2 {
            font-size: 1.5em;
            margin-top: 0.25em;
            margin-bottom: 0.25em;
            color: #22b926;
            text-align: center;
            font-style: italic;
        }

但是，尽管有 -webkit-、-ms- 和 -o- 变换，但比例放大仅适用于 Firefox。造型有什么问题？

标签： htmlcssvue.js

Answer 1

scale()需要一个<number>，不确定为什么 Firefox 在这里接受百分比，但是对于您的情况，只需执行

(this.boxData.scaleOnHover ? 
  `transform: scale(${this.scale / 100});`