I am having trouble applying a translate transformation to an h1 element within a div. Despite my efforts, the element does not move as expected.
Below is the code snippet:
HTML:
body {
padding: 0;
margin: 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>
I have tried using position:relative and testing it in Chrome, but I can't seem to get it to work. Any suggestions?