为什么我的改变不会：翻译工作？

时间：2022-11-26 10:10:49

I have a DIV with an h1 element inside. I'm trying to transform:translate the element, but nothing happens.

我有一个内部带有h1元素的DIV。我正在尝试改造:翻译元素,但没有任何反应。

Here's the code.

这是代码。

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>

It should work, shouldn't it? I've tried position:relative, but it doesn't work either. I tested it in Chrome.

它应该工作,不应该吗?我尝试了位置:相对,但它也不起作用。我在Chrome中测试过它。

2 个解决方案

#1

0  

Remove the space between translate and the bracket (Parentheses)

删除translate和括号之间的空格(圆括号)

change:

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

为什么我的改变不会：翻译工作？

to

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

为什么我的改变不会：翻译工作？

or

translate3d(10em,10em,0);

or

translateX(10em) translateY(10em)

#2

0  

Pretty sure you are just missing the Chrome specific styling. Try changing your .text style to.

很确定你只是缺少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;
}

#1

0  

Remove the space between translate and the bracket (Parentheses)

删除translate和括号之间的空格(圆括号)

change:

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

为什么我的改变不会：翻译工作？

to

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

为什么我的改变不会：翻译工作？

or

translate3d(10em,10em,0);

or

translateX(10em) translateY(10em)

#2

0  

Pretty sure you are just missing the Chrome specific styling. Try changing your .text style to.

很确定你只是缺少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;
}
标签：

相关文章