CODEWITHSUNDEEP
htmlcss
flaskehals
flaskehals

Reputation: 107

Why won't my transform:translate work?

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

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.

Upvotes: 4

Views: 5946

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Remove the space between translate and the bracket (Parentheses)

change:

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

enter image description here

to

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

enter image description here

or

translate3d(10em,10em,0);

or

translateX(10em) translateY(10em)

Upvotes: 3

Tim B James
Tim B James

Reputation: 20364

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

.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;
}

Upvotes: 1

Related Questions