What could be causing my transform:translate to not function properly?

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?

Answer №1

To fix the issue, you need to eliminate the space between the translate function and the opening bracket (parentheses).

The code should be updated from:

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

to:

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

You can also use:

translate3d(10em,10em,0);

or

translateX(10em) translateY(10em)

Answer №2

I believe the issue lies in the lack of specific Chrome styling in your code. You may want to consider adjusting the .text style like this.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-Step Guide: Customize the Background Color in an Angular 4 Select Dropdown Based on the Selected Option

I'm facing a challenge in setting the background color of a select element based on the color attribute of its currently selected option. I'm using Angular 4 for this task. An example of what I am attempting to accomplish is shown below: <se ...

The content in the html document is not flowing outside a div unless I eliminate the floating property from the div(s)

My goal is to create a page layout with three sections, each floated left based on the device width using media queries in my CSS. I have successfully achieved this, but when I inspect the page using Chrome Developer Tools, I notice that the body is not sp ...

Clicking 'Back to Top' within an accordion

On my webpage, I have two scrolls present. One is clearly visible on the page (not loaded with ajax), while the other one is located inside an accordion. Both of them share the same class names. I want these scrolls to always be positioned at the top. I&a ...

The Bootstrap model popup darkens the screen, but there are a few areas that remain at the same level of brightness and do not get dim

https://i.sstatic.net/09QtK.png Within my Angular 7 project, I have implemented a Bootstrap modal. However, I am facing an issue where only components with position: relative are darkened when the modal is opened. Some components have position: fixed, as ...

Tips for sending CSS and HTML elements back to the client's browser after a Form-POST action and JavaScript

I am currently working on a project to create a platform where users can easily make payments to each other. I aim to simplify the process using JavaScript and HTML Forms, similar to how Stripe offers Checkout buttons (as seen in the sample code below). & ...

Adding data to a DIV element in an HTML file through a PHP file

I am unsure if this can be done, but I believe it may involve PHP (which I am new to). Essentially, I have an .html file with an empty DIV tag and I want to retrieve the content of that DIV tag from a .php file and insert it into the DIV. To clarify furt ...

Eliminating aliasing from an SVG circular element

I am currently working on creating an animated SVG pie chart. The setup involves two SVG elements, where the first element is given a border-radius of 50%, and the second element is a circle that is filled up to a specific value. This results in one circle ...

Dealing with CSS Overflow Issues: Fixing the Scroll Bug

My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto. I've noticed that when I resize the browser window, the scrollbar slowly disappears ...

How can I perform a MySQL UPDATE using 2 parameters received from an AJAX request ($_POST)?

I am currently working on an AJAX call that updates a row in the database based on the ID (pid=38) and changes the value of a column to NULL depending on the button clicked (taskimg0). I have managed to make it work by hardcoding the value $_POST['dtf ...

Close button situated at the top-right corner overlapped by HTML/CSS styling

Currently attempting to position a button overlapping and extending outside of its parent div, much like the illustration provided. However, my current efforts result in the button being contained within the parent DIV. The visual reference below showcases ...

Challenges with Knockout.js Virtual Elements in Different Environments

I am facing a peculiar issue where a virtual knockout template fails to bind correctly when accessed remotely, yet functions perfectly when viewed locally. You can find the problematic page here: Here is the template I am using: <ul> <!-- k ...

Explore the power of Infinity.js for optimizing the rendering of large HTML tables, complete with a detailed example using prototype

Is there a way to efficiently load/render large html tables without compromising performance, especially in Internet Explorer? I recently came across a plugin in prototype.js (https://github.com/jbrantly/bigtable/, post: , demo:) that addresses this issue ...

The Unique Font That Mysteriously Blocks Fake Italic Styles on Webkit Browsers

Currently, I am utilizing the PT Sans Narrow font in my project, which unfortunately only offers regular and bold styles. As a result, I require the browser to apply faux italics when needed. Strangely, this functionality is only working on non-webkit brow ...

What's the best way to determine the background image on this website? I'm in the process of replicating a site on

I have been asked to clone the website in order to create a Wordpress site. The original site is currently on Kajabi platform. I managed to download all images from the Kajabi site by right-clicking and selecting download. However, there are certain image ...

Switch the color of material icons when hovered over

Currently experimenting with this demo and I'm looking to adjust the color of icons when hovered over .demo-navigation .mdl-navigation__link .material-icons:hover { background-color: #00BCD4; color: #FFF; } Unfortunately, my attempt was unsucces ...

To interact with a dynamic div that is generated without any specific ID or class, which is contained within a fixed div, you can

Is there a way to trigger a click function using JQUERY on the div that includes the text "Save as JPEG"? The div with the ID "graph1" remains static while all other nested divs are dynamic. Please note that the dynamic div containing the text does not h ...

Mobile devices not displaying background images correctly

My Wordpress website has a section with the code below, but the image is not adjusting properly on mobile phones. Can you provide some advice? .one_half_bg { width: 50%; float: left; background-position: 50% 50% !important; backgroun ...

Tips for refreshing the page upon Geolocation request

I am working on a HTML5 project that requests geolocation from the user. Here is an image of what it looks like: https://i.sstatic.net/o6yCj.png My main query is: Is there a way to refresh the page automatically once the user grants permission to share t ...

Receive live notifications using the Cramp framework in Ruby and Server-Sent Events in HTML5

I have created a demo application to receive real-time updates from the server using Cramp(Ruby) and SSE(HTML5). Encountering the following errors while trying to access the HTML file at http://localhost/sse_time.html: Errors: Chrome: Uncaught Error: S ...

Why do identical elements show different scrollHeights when overflowed and how can this discrepancy be resolved?

I am using a plugin that generates a <p> element and continuously fills it with the content from a <textarea>. This plugin positions the <p> directly below the <textarea>, and styles them so that they appear identical in terms of th ...