I'm making a game using React.js, and the player element is a simple image with sprite images implemented in CSS:
.player {
position: absolute;
height: 32px;
width: 32px;
object-fit: none;
transform-origin: 50% 50%;
transform: scale(calc(var(--factor) / 2)) rotate(0.02deg);
image-rendering: pixelated;
}
How would I add the translate() function to make the player's top left corner exactly at (0, 0)?
If you want to be all the way at the top, no matter what else is on the page, position it absolute. This ignores everything up to the next highest positioned element That means it has a position other than the default. You can do that like this.
position: absolute;
top: 0;
left: 0;
/// You might need to adjust for your transform here though
oops... just saw that you already had it absolute. You were 90% of the way there.
For this .player needs a wrapped element with position: relative, and we don't need transform-origin or transform styles:
.parentOfPlayer {
position: relative;
}
.player {
position: absolute;
top: 0;
left: 0;
}
Related
As demonstrated here. When changing the width/height of an element that is rotated by some angle. The element moves.
How is it possible to fix and preserve the position of the element at the bottom right or any other corner for that matter when the width or height of the element is changed. And without changing the transform origin.
CSS:
.test{
position: absolute;
top: 200px;
left: 200px;
width: 400px;
height: 200px;
background: red;
transform: rotate(120deg);
}
You can do that by absolutely positioning the .test object using percentages and then offsetting those with transform. By replacing your .test css with the css below you will make the center of the object align to the center of the container no matter what its size is:
.test{
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%) rotate(120deg);
width: 400px;
height: 200px;
background: red;
}
To not make the object centered you will have to play around with the percentages of the bottom, right and translate properties.
I have a jsfiddle animation that I want to set to use as a background div of a png image. I can set the height and width of the animation and I tried setting it to the div using
document.getElementByID('progress').appendChild(canvas);
However, instead of the canvas displaying where it should it shows up under the image with the functioning animation. Here is the jsFiddle.
The canvas will be placed underneath the #progressbar because the default css of this element is. position:static;.
When applying position:absolute; on the canvas it will be place on top of the #progressbar.
To be more precise:
#progress{
position: relative;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
Depending on the exact placement in the z-dimension, you can use z-index:-1; or z-index:1;. By doing this the canvas will be in front or behind the #progressbar.
Example code: http://jsfiddle.net/u4cLxjrg/1/
http://jsfiddle.net/3qc2p1va/
I added some CSS styles to the canvas element, made it absolute and positioned relatively to its parent.
canvas {
display: inline;
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: 0 auto;
z-index: -1;
}
Apply this css. Z-index will put the canvas under others div.
#progress {
position: relative;
}
canvas {
top: 0;
left: 0;
z-index: -1;
position: absolute;
}
I have a div that is centered on the middle of the screen. I need to pass some text to the div and the text will be of various lengths. The problem is that when I pass text to the div, it changes size but wont stay centered. Here's a JSFiddle that demonstrates the problem.
I currently center the div like this:
position: absolute;
top: 50%;
left: 50%;
Add this line:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
http://jsfiddle.net/h0d097vp/3/
Your div is not centered. The existing positioning centered the top left corner of the div.
Try this:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
JSfiddle Demo
Can you set constant width?, if so here's your answer JSFiddler
Just added
width: 100px;
right: 0;
left: 0;
margin: auto;
Your div is not centered in the beginning either. left: 50% means that the diff starts at 50%, which means that the start of the div is at the center of the page.
When the div has a width of 200px, than still only the start will be at the center.
You can give the div a fixed width, and than add a negative margin of half the width so the div will really be in the center of the page.
Like
#divError{
width: 200px;
margin-left: -100px;
}
When using top and left they position whichever side they are named directly at the position given. So left: 50% will always have the leftmost side positioned directly at the 50% mark. This is not the center, but starts the left side of the div at the center. The same occurs with top: 50%. In order to use top and left you'd need to know the overall width and height and subtract half of their value from their respective top and left (e.g left: calc(50% - ([width of element] / 2)). Since you are using dynamic content you can't know either the height or the width (unless you make them static.)
So what can you do? There are a few ways, but my favorite at the moment is fairly new. It's called flexbox. It's support is decent. There's a nice snippet from css-tricks as well.
The relevant code to center an element both vertically and horizontally would go like this:
$(document).ready(function() {
$("button").click(function() {
$.get("http://lorem.mannfolio.com/", function(data) {
var lorem = data.split("\n\n");
$(".centered").html(lorem[0]);
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: 1px solid black;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
<button>Change text</button>
<div class="container">
<div class="centered">I'm centered No matter what you put in me.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Just wanted to say thanks in advance.
First I have a single div that is Height: 100% and Width: 130px I have a 130x5px image that i want to repeat vertically until i get to 75% of the screen height. Then i want to place another image directly underneath it. I know how to repeat the image vertically. But i am not sure how to attach another image directly below it.
P.S. I want it to all be in the same div so that i can use JQuery to control the div and not just the individual elements inside of it.
How about something like this:
div.snocavotia {
background: url(http://lorempixel.com/130/5/) repeat;
z-index: 100;
height: 100%;
width: 130px;
position: relative;
}
div.snocavotia:after {
background: url(http://lorempixel.com/130/30/) repeat;
z-index: 1;
content: '';
position: absolute;
top: 75%;
right: 0;
bottom: 0;
left: 0;
}
Example: http://cssdesk.com/h2XGc
How to center a div across all browsers and behind this div there should be a transparent background layer covering entire screen of browser like lightbox.
If you give the div a fixed width, it's easy to use negative margins:
div {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-top: -200px;
margin-left: -300px;
z-index: 20;
}
Without a fixed height, you cannot center the div vertically without JavaScript. With a dynamic height, you can vertically center the div using a snippet like this (in jQuery):
$(function() {
var mydiv = $('div');
mydiv.css({
top: $(window).scrollTop() + $(window).height() / 2 - mydiv.height() / 2
});
});
As for the transparent overlay, just give it an absolute position and a full width and height:
div#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 10;
}
If you can ditch IE6 support, you can simply use position: fixed instead of absolute, that way the divs will be centered even if the user scrolls the page, and even when JavaScript is turned off.