Question

我有一个内部带有h1元素的DIV。我正在尝试转换：翻译元素，但没有任何反应。

这是代码。

HTML：

body {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
#one {
  width: 100vw;
  height: 100vh;
  background-image: url(12EatersAllOver-ss-slide-1ZRA-blog533-v5.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
}
.text {
  color: white;
  display: inline-block;
  -webkit-transform: translate (10em, 10em);
  transform: translate (10em, 10em);
  -ms-transform: translate (10em, 10em);
  font-family: helvetica;
}

<!DOCTYPE HTML>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled</title>
  <link rel="stylesheet" type="text/css" href="Stylez.css">
</head>

<body>

  <div id="one">
    <h1 class="text">Yolo swag. Foshizzle.</h1>

  </div>

</body>

</html>

应该有用，不应该吗？我尝试过位置：相对，但它也不起作用。我在Chrome中测试了它。

Answer 1

删除translate和bracket (Parentheses)

之间的空格

变化：

-webkit-transform: translate (10em,10em);

enter image description here

到

-webkit-transform: translate(10em,10em);

enter image description here

或

translate3d(10em,10em,0);

或

translateX(10em) translateY(10em)

Answer 2

非常确定您只是缺少Chrome特定的样式。尝试将.text样式更改为。

.text {
    color: white;
    display: inline-block;
    -moz-transform: translate(10em,10em);
    -ms-transform: translate(10em,10em);
    -o-transform: translate(10em,10em);
    -webkit-transform: translate(10em,10em);
    transform: translate(10em,10em);
    font-family: helvetica;
}

为什么要赢得我的转变：翻译工作？

2 个答案: