I'm trying to create a 3d-scene in css, but I can't seem to get it to work the way I want. What I'm trying to make is a table containing a deck of cards. My HTML looks as folows: (here the 'scene' div is the table and the 'item' is the deck of cards)
<div class="scene-wrap">
<div class="scene">
<div class="item">
<div class="item__right">
</div>
<div class="item__front">
</div>
<div class="item__top">
</div>
</div>
</div>
</div>
The item is missing a left and back side, but that's not important at this point. I've made a fiddle here, with the CSS: https://jsfiddle.net/do76ro22/
The problem is that the item element doesn't look realistic, as if the perspective is incorrect. The left border is diagonal but should be straight, to make it look like a real scene. You can see it better if you change the rotateX value on the scene class.
Does anyone know how to make this look more realistic?
probably the property that you are lookin for is
perspective-origin: left center;
I have added a little left positioning so that it doesn't collapse
.scene-wrap {
width: 800px;
height: 400px;
position: relative;
top: 100px;
left: 100px;
background: yellow;
perspective: 800px;
perspective-origin: left center;
}
.scene {
width: 100%;
height: 100%;
background: green;
transform-style: preserve-3d;
transform: rotateX(50deg);
position: absolute;
}
.item {
width: 200px;
height: 300px;
background: red;
position: relative;
transform-style: preserve-3d;
left: 5px
}
.item__right {
height: 100%;
width: 100px;
position: absolute;
top: 0;
left: 100%;
background: blue;
transform: rotateY(-90deg);
transform-origin: left center;
}
.item__front {
height: 100px;
width: 100%;
position: absolute;
top: 100%;
left: 0;
background: lightblue;
transform: rotateX(90deg);
transform-origin: center top;
}
.item__top {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: darkblue;
transform: translateZ(100px);
}
<div class="scene-wrap">
<div class="scene">
<div class="item">
<div class="item__right">
</div>
<div class="item__front">
</div>
<div class="item__top">
</div>
</div>
</div>
</div>
Related
This question already has answers here:
Center aligning a fixed position div
(16 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 2 years ago.
I have two 50% width divs and want to make a div(which is inside one of them) to be position fixed and center.
I have created a codepen. Please have a look at it to get a better idea about the problem. Also I have embed my code here as well.
<div class="parent">
<div class="first">
<p>...</p>
</div>
<div class="second">
<p>...</p>
<div class="floating"></div>
</div>
</div>
.parent {
display: flex;
width: 100%
}
p {
color: #fff;
padding: 20px;
}
.first {
width: 50%;
height: 100vh;
background-color: #000;
}
.second {
width: 50%;
height: 100vh;
background-color: #ddd;
}
.floating {
width: 100px;
height: 100px;
background-color: #fff;
position: fixed;
}
PS I know its possible with position sticky but I don't want to use it. You can add the below code in .floating class and it will be in center.
position: sticky;
margin: 0 auto;
Use transform: translate(-50%) with left: 50%:
.centered {
background: forestgreen;
width: 400px;
height: 100px;
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="centered"></div>
`
Set the position relative to second element and than set the box in center with position absolute like this:
.second {
position: relative;
width: 50%;
height: 100vh;
background-color: #ddd;
}
.floating {
width: 100px;
height: 100px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
You can use position:
<div class="parent">
<div class="first">
</div>
<div class="second">
</div>
<div class="floating"></div>
</div>
You can show full code in JSFIDDLE
I want to create a div like below.
And the html is
<div class="col-lg-3 col-md-3 col-sm-3">
<div style="background-color: rgb(236, 236, 236); border-radius: 100px; width: 80%; height:80%; padding: 50px">
<h2 style="width: 100%; height: 100%" />Text</h2>
</div>
</div>
This work fine in 100% page view but if i zoom in or out the page the background of the 'text' div's shape is changing. Can you help me to fix this. Basically I want a scallable background for the div.
Use a pseudo-element...
body {
text-align: center;
}
:root {
--val: 200%;
}
h2 {
display: inline-block;
margin-top: 50px; /* adjust as required - or align some other way*/
position: relative;
}
h2::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--val);
padding-bottom: var(--val);
transform: translate(-50%, -50%);
background: lightgrey;
z-index: -1;
border-radius: 50%;
}
<h2>Text</h2>
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>
#first {
position: relative;
width: 20%;
height: 20%;
border-radius: 50%;
background-color: #94b8b8;
}
#second {
position: absolute;
width: 15%;
height: 15%;
border-radius: 50%;
background-color: blue;
}
<html>
<body>
<div id="first">
<div id="second">
</div>
</div>
</body>
</html>
How to get it i want the second div in the exact center of the first div but it is not even visible. how achieve this without using left, top attributes.
note:i wants align it only using css but not using tag.
To center absolutely positioned div with known width, you can use this:
.inner1 {
left: 0;
right: 0;
margin: auto;
}
Or, if you need to center it both horizontally and vertically:
.inner2 {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
If width of inner is unknown - use css3 transforms:
.inner3 {
left: 50%;
transform: translateX(-50%);
top: 0;
}
Ant for vertical centering also:
.inner4 {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Fiddle demo: https://jsfiddle.net/4qxpc0ua/
calculate the top and left position and apply it for the second div.
#first {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #94b8b8;
}
#second {
position: absolute;
width: 15%;
height: 15%;
left:42.5%; //50% - (15% / 2)
top:42.5%; //50% - (15% / 2)
border-radius: 50%;
background-color: blue;
}
DEMO
There are several possibilities to do what you want:
.outer {
background: lightblue;
width: 300px;
height: 100px;
}
.inner {
background: black;
width: 100px;
height: 50px;
color: white;
}
<div class="outer" align="center">
<div class="inner">
Deprecated (use css)
</div>
</div>
<br>
<div class="outer">
<div class="inner" style="position: relative; left: 50%; margin-left: -50px;">
:)
</div>
</div>
<br>
<div class="outer" style="position: relative">
<div class="inner" style="position: absolute; left: 50%; margin-left: -50px;">
:)
</div>
</div>
<br>
<div class="outer">
<div class="inner" style="margin: 0 auto;">
</div>
</div>
Another solution
.outer {
width: 100%;
text-align: center;
}
.inner {
display: inline-block;
}
Attached is a brief mockup of what I need to create. The div not only needs to skew on the bottom, but the next row will need to skew to the top.
Is there a clean way this can be done using CSS? I've tried some CSS solutions ( e.g http://jsfiddle.net/mXLgF/ ) but can not get this effect.
My current HTML / CSS is at this stage:
<div class="skew_bottom_right">
<div style="height: 300px; background: url('http://placehold.it/850x350');">
</div>
</div>
.skew_bottom_right div:after {
content: '';
position: absolute;
left: 0;
bottom: -60px;
width: 100%;
height: 115px;
background: white;
-webkit-transform: skewY(8.5deg);
-moz-transform: skewY(8.5deg);
-ms-transform: skewY(8.5deg);
-o-transform: skewY(8.5deg);
transform: skewY(8.5deg);
-webkit-backface-visibility: hidden;
z-index: 5;
}
Each of those containers will eventually made into a slide, so ideally they should be div's with background images or containing divs having a background image.
Your code is pretty good.
Just needed some minor adjustments...
.container{
overflow:hidden;
}
.parallelogram {
width: 600px;
height: 100px;
margin: 30px 0;
transform: skewY(5deg);
background: gray;
overflow:hidden;
position:relative;
}
.parallelogram.header {
height: 150px;
margin: -30px 0;
}
.parallelogram.footer {
height: 150px;
margin: -30px 0;
}
.image{
background: url(http://placekitten.com/300/300);
background: blue;
width: calc(100% / 3);
height: 100%;
display: inline-block;
float: left;
border: 3px solid white;
box-sizing: border-box;
}
<div class="container">
<div class="parallelogram header"></div>
<div class="parallelogram">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<div class="parallelogram footer"></div>
</div>