Why in IE and other browsers i have so different result?
IE calculate size of transformed element before transformation?
.foo {
width: 300px;
height: 300px;
overflow: auto;
background: #0ff;
position: relative;
}
.bar {
width: 400px;
height: 400px;
background: #000;
transform: scale(0.9) translate3d(-200px, -200px, 0);
transform-origin: center;
position: absolute;
left: 50%;
top: 50%;
// margin-top:-200px;
//rgin-left:-200px;
}
<div class='foo'>
<div class="bar"></div>
</div>
Related
I would like to transform a div to apply it in front of a panel.
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 661px;
height: 384px;
-webkit-transform: skewY(4.1deg) rotate(1deg);
background-color: red;
but on bottom right the div doesn't fill to the background.
What is the css property to set it correctly ?
You can add skewX to your css.
I tried this and almost filled the shape :
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 641px;
height: 354px;
-webkit-transform: skewY(4.1deg) rotate(1deg) skewX(2deg);
background-color: red;
This code fixes the bottom right corner and takes other answers into consideration:
.background {
position: relative;
width: 960px;
height: 720px;
background-image: url('http://www.radiomelodie.com/actus/actu-08062017id7801.jpg');
}
.overlay {
position: absolute;
font-size: 28px;
top: 200px;
left: 149px;
width: 665px;
height: 395px;
-webkit-transform: skewY(3deg) skewX(1deg) rotate(0.9deg);
background: linear-gradient(359.2deg, transparent 6%, red 6%)
}
<div class="background">
<div class="overlay"></div>
</div>
I'm trying to center an image vertically inside a div - while keeping the proportions of the original image and only allowing it to be inside the div.
The original image source will change dynamically - it could be any size in theory: 200x150, 500x100, 500x500 etc.
What I have so far is this:
.outer {
position: relative;
background: gray;
width: 200px;
height: 150px;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: gold;
overflow: hidden;
width: 200px;
height: 150px;
}
.inner img {
width: auto;
max-width: 100%;
max-height: 150px;
height: auto;
}
<div class="outer">
<div class="inner">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwI_CFh8BfnYAn6pL7Pe1AX_LuxrvEs4HqL2qWNPoTvESUwj5hdw">
</div>
</div>
In this example - I want it to look like this:
https://i.stack.imgur.com/a7nPt.png
Is it possible with css?
Thanks in advance
Just add following to the image
margin: 0 auto;
display: block;
full code:
.outer {
position: relative;
background: gray;
width: 200px;
height: 150px;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: gold;
overflow: hidden;
width: 200px;
height: 150px;
}
.inner img {
width: auto;
max-width: 100%;
max-height: 150px;
height: auto;
margin: 0 auto;
display: block;
}
<div class="outer">
<div class="inner">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwI_CFh8BfnYAn6pL7Pe1AX_LuxrvEs4HqL2qWNPoTvESUwj5hdw"
</div>
</div>
I'm trying to create a background with two diagonal splits, with one over the other one.
I tried using two linear-gradient on the background but it didn't work.
Any can help me solve this with CSS?
This can be done using linear-gradient background images but it would need gradients instead of just one.
.diagonal-background {
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, transparent 50%, #EEE 50.5%),
linear-gradient(to bottom right, transparent 50%, #CCC 50.5%);
/* just for demo */
line-height: 200px;
text-align: center;
}
<div class='diagonal-background'>
Some content</div>
1- You can do this (adjust your needs):
CSS
div {
display: inline-block;
background: #FCFCFE;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.bg1 {
position: absolute;
top: 50px;
display: inline-block;
transform: rotate(45deg);
width: 300px;
height: 300px;
left: -160px;
background: #F8F7FA;
z-index: 1;
}
.bg2 {
position: absolute;
top: 50px;
display: inline-block;
transform: rotate(-45deg);
width: 300px;
height: 300px;
right: -160px;
background: #F2F3F6;
z-index: 1;
}
HTML
<div>
<div class="bg2"></div>
<div class="bg1"></div>
</div>
DEMO HERE
2- Or you can use pseudo elements (adjust your needs):
CSS
div {
display: inline-block;
background: #FCFCFE;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
div:after {
position: absolute;
content:"";
top: 50px;
display: inline-block;
transform: rotate(45deg);
width: 300px;
height: 300px;
left: -160px;
background: #F8F7FA;
z-index: 1;
}
div:before{
position: absolute;
content:"";
top: 50px;
display: inline-block;
transform: rotate(-45deg);
width: 300px;
height: 300px;
right: -160px;
background: #F2F3F6;
z-index: 1;
}
HTML
<div></div>
DEMO HERE
I have a fluid container which contains a number of absolutely positioned fluid divs. I want to use CSS3 transforms to move these on and off the page. The problem i am having is that when using transforms you either use exact pixel amounts or percentages of the element itself.
So you can see an example of the sort of thing i'm referring to (this is just a test example) at http://jsfiddle.net/K3uPY/
This is using a transform of 1000% to move them offscreen which is obviously not a good thing to do as if the display is massive it won't work and it means each div ends up a different distance from off the screen edge so the animations can end up taking quite a different amount of time to complete depending on their original size.
What i want to do it move them all just offscreen based on the viewport width/height (and the related direction).
This can easily be done by animating the top/left positions but this is obviously not optimal on all devices (see http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)
Is there anyway to do this using CSS3 transforms or even keyframes or am i stuck having to animate the left/top positions?
The CSS from the JSfiddle is:
html, body {height:100%; width: 100%; padding:0; margin:0;}
#wrapper {width: 100%; height: 100%; overflow: hidden;}
#container {width:50%; height: 50%; margin: auto; position: relative;}
#container div {
background-color: red;
position: absolute;
height: 25%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border: 2px solid #000000;
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
-o-transition-duration: 600ms;
transition-duration: 600ms;
cursor: pointer;
}
.zoomleft {
-webkit-transform:translate(-1000%);
-moz-transform:translate(-1000%);
-ms-transform:translate(-1000%);
-o-transform:translate(-1000%);
transform:translate(-1000%);
}
.zoomright {
-webkit-transform:translate(1000%);
-moz-transform:translate(1000%);
-ms-transform:translate(1000%);
-o-transform:translate(1000%);
transform:translate(1000%);
}
.zoomtop {
-webkit-transform:translate(0, -1000%);
-moz-transform:translate(0, -1000%);
-ms-transform:translate(0, -1000%);
-o-transform:translate(0, -1000%);
transform:translate(0, -1000%);
}
.zoombottom {
-webkit-transform:translate(0, 1000%);
-moz-transform:translate(0, 1000%);
-ms-transform:translate(0, 1000%);
-o-transform:translate(0, 1000%);
transform:translate(0, 1000%);
}
div.d1 {
width: 50%;
top: 0;
left: 0;
}
div.d2 {
width: 50%;
top: 0;
left: 50%;
}
div.d3 {
width: 25%;
top: 25%;
left: 0;
}
div.d4 {
width: 25%;
top: 25%;
left: 25%;
}
div.d5 {
width: 25%;
top: 25%;
left: 50%;
}
div.d6 {
width: 25%;
top: 25%;
left: 75%;
}
div.d7 {
width: 50%;
top: 50%;
left: 0;
}
div.d8 {
width: 50%;
top: 50%;
left: 50%;
}
div.d9 {
width: 50%;
top: 75%;
left: 0;
}
div.d10 {
width: 50%;
top: 75%;
left: 50%;
}
Thanks everyone,
Dave
Fortunately, since everything is fluid according to the viewport, you can still use percentages in the transform. See my Fiddle - http://jsfiddle.net/K3uPY/23/
One thing I did have to change was make sure #container was in the absolute center. I have also drastically simplified the JS and moved all of the positioning into the CSS.
HTML
<div id="wrapper">
<button id="movebtn">Move</button>
<div id="container">
<div class="box d1 active">1</div>
<div class="box d2 active">2</div>
<div class="box d3 active">3</div>
<div class="box d4 active">4</div>
<div class="box d5 active">5</div>
<div class="box d6 active">6</div>
<div class="box d7 active">7</div>
<div class="box d8 active">8</div>
<div class="box d9 active">9</div>
<div class="box d10 active">10</div>
</div>
</div>
JAVASCRIPT
$( "#movebtn" ).on('click', function() {
$('.box').toggleClass('active');
});
CSS
html,
body {
height:100%;
margin:0;
overflow: hidden;
width: 100%;
}
#wrapper {
height: 100%;
overflow: hidden;
width: 100%;
}
#container {
width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
background-color: red;
border: 2px solid #000000;
box-sizing: border-box;
cursor: pointer;
height: 25%;
position: absolute;
transition-duration: 600ms;
}
.box.active {
transform: none;
}
.d1 {
width: 50%;
top: 0;
left: 0;
transform: translateY(-300%);
}
.d2 {
width: 50%;
top: 0;
left: 50%;
transform: translateY(-300%);
}
.d3 {
width: 25%;
top: 25%;
left: 0;
transform: translateX(-300%);
}
.d4 {
width: 25%;
top: 25%;
left: 25%;
transform: translateX(-400%);
}
.d5 {
width: 25%;
top: 25%;
left: 50%;
transform: translateX(400%);
}
.d6 {
width: 25%;
top: 25%;
left: 75%;
transform: translateX(300%);
}
.d7 {
width: 50%;
top: 50%;
left: 0;
transform: translateX(-200%);
}
.d8 {
width: 50%;
top: 50%;
left: 50%;
transform: translateX(200%);
}
.d9 {
width: 50%;
top: 75%;
left: 0;
transform: translateY(300%);
}
.d10 {
width: 50%;
top: 75%;
left: 50%;
transform: translateY(300%);
}
I want to create the following shape:
Important: if I use "Border Radius" I get this (and I do not want this result):
Here are DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
Something like this would be roughly equivalent:
http://jsfiddle.net/ny4Q9/
css:
.curvetop {
position: relative;
margin-top: 80px;
background: red;
width: 100%;
height: 400px;
z-index: 1;
}
.curvetop:after {
top: -80px;
display: block;
position: absolute;
content: '';
border-radius: 50%;
background: red;
width: 100%;
height: 170px;
}
markup:
<div class="curvetop"></div>
By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.
You can use border radius
http://jsfiddle.net/wULyB/
<div id="out">
<div id="in"></div>
</div>
CSS
#out{
width: 100px;
height: 100px;
overflow: hidden;
background: green;
position: relative;
}
#in{
width: 200px;
height: 200px;
border-radius: 100px;
background: black;
position: absolute;
left: -50px;
top: 30px;
}
You can play around with the numbers but you get the idea