Why does Transform-style: preserve-3d break z-zindex?
I am experimenting with CSS 3d effects:
My Goal is to create a 3-dimensional animated letter.
As soon as I add transform-style: preserve-3d to #F_cnt the divs appear in the wrong layers. The z-index has no effect.
When I remove transform-style: preserve-3d it works fine.
Please help me! Thank you!
#F1 {
width: 5rem;
height: 25rem;
background: blue;
position: absolute;
transform: translateZ(5rem);
}
#F2 {
width: 10rem;
height: 5rem;
background: blue;
position: absolute;
left: 5rem;
top: 0;
transform: translateZ(5rem);
}
#F3 {
width: 5rem;
height: 5rem;
background: blue;
position: absolute;
transform: translateZ(5rem);
left: 5rem;
top: 10rem;
}
#Fb1 {
width: 5rem;
height: 25rem;
background: yellow;
position: absolute;
transform: translate3d(2.5rem, -2.5rem, 4.99rem);
}
#Fb2 {
width: 10rem;
height: 5rem;
background: yellow;
position: absolute;
left: 5rem;
top: 0;
transform: translate3d(2.5rem, -2.5rem, 4.99rem)
}
#Fb3 {
width: 5rem;
height: 5rem;
background: yellow;
position: absolute;
left: 5rem;
top: 10rem;
transform: translate3d(2.5rem, -2.5rem, 4.99rem)
}
#Ftop_1 {
width: 15rem;
height: 5rem;
background: green;
position: absolute;
bottom: 0;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(5rem);
}
#Ftop_2 {
width: 5rem;
height: 5rem;
background: green;
position: absolute;
bottom: -10rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(5rem);
}
#Fbot {
width: 5rem;
height: 5rem;
background: green;
position: absolute;
bottom: -25rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(4.99rem);
}
#Fbot_2 {
width: 5rem;
height: 5rem;
background: green;
position: absolute;
bottom: -15rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(4.99rem);
}
#Fbot_3 {
width: 10rem;
height: 5rem;
background: green;
position: absolute;
bottom: -5rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateX(60deg) skewX(-27deg) translateZ(4.99rem);
}
#Fright_1 {
width: 5rem;
height: 5rem;
background: red;
position: absolute;
left: 15rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fright_2 {
width: 5rem;
height: 5rem;
background: red;
position: absolute;
bottom: -10rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fright_3 {
width: 5rem;
height: 10rem;
background: red;
position: absolute;
bottom: -25rem;
left: 5rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fright_4 {
width: 5rem;
height: 5rem;
background: red;
position: absolute;
bottom: -15rem;
left: 10rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(5rem);
}
#Fleft {
width: 5rem;
height: 25rem;
background: red;
position: absolute;
bottom: -25rem;
transform-origin: left bottom;
transform: rotateY(-59deg) skewY(-26.8deg) translateZ(4.99rem);
}
#F_cnt {
margin-top: 5rem;
margin-left: 30rem;
position: absolute;
animation-name: F-anim;
animation-duration: 5s;
animation-iteration-count: infinite;
transform-style: preserve-3d;
}
#F {
perspective: 10000px;
perspective-origin: 50%;
background: black;
position: relative;
}
<body>
<div id="F">
<div id="F_cnt">
<div id="F1"></div>
<div id="F2"></div>
<div id="F3"></div>
<div id="Fb1"></div>
<div id="Fb2"></div>
<div id="Fb3"></div>
<div id="Ftop_1"></div>
<div id="Ftop_2"></div>
<div id="Fbot"></div>
<div id="Fbot_2"></div>
<div id="Fbot_3"></div>
<div id="Fright_1"></div>
<div id="Fright_2"></div>
<div id="Fright_3"></div>
<div id="Fright_4"></div>
<div id="Fleft"></div>
</div>
</div>
</body>
Related
I asked this question earlier asking how to skew an assortment of images. I was able to get very satisfying results
.container {
font-size: 0;
height: 215px;
margin: 30px 50px;
text-align: center;
color: black;
}
.box1 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 3px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box2 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box3 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box4 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box5 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box6 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box1 span {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
right: -100%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box2 span {
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box3 span {
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box4 span {
position: absolute;
top: 0;
bottom: 0;
left: -35%;
right: -35%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box5 span {
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box6 span {
position: absolute;
top: 0;
bottom: 0;
left: -35%;
right: -35%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
<div class="container">
<div class="box1"><span style="background-image:url(illustris1.png)"></span></div>
<div class="box2"><span style="background-image:url(gal.png)"></span></div>
<div class="box3"><span style="background-image:url(laniakea.jpg)"></span> </div>
<div class="box4"><span style="background-image:url(globularstar.jpg)"></span></div>
<div class="box5"><span style="background-image:url(elliptical.jpg)"></span></div>
<div class="box6"><span style="background-image:url(illustris2.png)"></span></div>
<div class="container mid"></div>
</div>
While my this snipped of code is lengthy compared to the answered one from the other thread, it allows me to resize for each picture I input.
What I am trying to do now is to have the far left end box1 and the far right end box6 of this container environment to skewed only in the inner portion of this assortment. It is kind of like the result this poster is wanting to get: Skew one side only of an element.
I have been attempting several methods of this for a couple hours and I do not to seem to have luck altering box1 and box6 To have one side skewed while not warping the images.
You can use negative margin for last and first one to hide half the element:
.container {
display: flex;
height: 150px;
margin: 0 30px;
overflow:hidden;
}
.box {
flex: 1;
border: 1px solid;
transform: skew(-25deg);
position: relative;
overflow: hidden;
}
.box:first-child {
margin-left:calc((100% / 5) / -2);
}
.box:last-child {
margin-right:calc((100% / 5) / -2);
}
.box:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
transform: skew(25deg);
background-image: var(--i);
background-position: center;
}
<div class="container">
<div class="box" style="--i:url(https://lorempixel.com/400/200/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/300/200/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/200/300/)"></div>
</div>
I asked this question earlier asking how to skew an assortment of images. I was able to get very satisfying results
.container {
font-size: 0;
height: 215px;
margin: 30px 50px;
text-align: center;
color: black;
}
.box1 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 3px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box2 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box3 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box4 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box5 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box6 {
font-size: initial;
width: calc(100% / 6);
height: 100%;
border: 2.5px solid;
box-sizing: border-box;
transform: skew(-25deg);
position: relative;
overflow: hidden;
display: inline-block;
}
.box1 span {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
right: -100%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box2 span {
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box3 span {
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box4 span {
position: absolute;
top: 0;
bottom: 0;
left: -35%;
right: -35%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box5 span {
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
.box6 span {
position: absolute;
top: 0;
bottom: 0;
left: -35%;
right: -35%;
transform: skew(25deg);
background-position: center;
background-size: cover;
}
<div class="container">
<div class="box1"><span style="background-image:url(illustris1.png)"></span></div>
<div class="box2"><span style="background-image:url(gal.png)"></span></div>
<div class="box3"><span style="background-image:url(laniakea.jpg)"></span> </div>
<div class="box4"><span style="background-image:url(globularstar.jpg)"></span></div>
<div class="box5"><span style="background-image:url(elliptical.jpg)"></span></div>
<div class="box6"><span style="background-image:url(illustris2.png)"></span></div>
<div class="container mid"></div>
</div>
While my this snipped of code is lengthy compared to the answered one from the other thread, it allows me to resize for each picture I input.
What I am trying to do now is to have the far left end box1 and the far right end box6 of this container environment to skewed only in the inner portion of this assortment. It is kind of like the result this poster is wanting to get: Skew one side only of an element.
I have been attempting several methods of this for a couple hours and I do not to seem to have luck altering box1 and box6 To have one side skewed while not warping the images.
You can use negative margin for last and first one to hide half the element:
.container {
display: flex;
height: 150px;
margin: 0 30px;
overflow:hidden;
}
.box {
flex: 1;
border: 1px solid;
transform: skew(-25deg);
position: relative;
overflow: hidden;
}
.box:first-child {
margin-left:calc((100% / 5) / -2);
}
.box:last-child {
margin-right:calc((100% / 5) / -2);
}
.box:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: -50%;
transform: skew(25deg);
background-image: var(--i);
background-position: center;
}
<div class="container">
<div class="box" style="--i:url(https://lorempixel.com/400/200/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/300/200/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
<div class="box" style="--i:url(https://lorempixel.com/200/300/)"></div>
</div>
How can I accomplish such a square with css? I don't know how to create such a border and how to center the text that perfectly.
I expect you to do something like this!
CSS:
.parent {
width: 150px;
height: 150px;
position: relative;
top: 40px;
left: 50px;
transform: rotate(45deg);
}
.parent:before {
content: "";
width: 106px;
height: 106px;
background: rgb(20, 20, 134);
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.orange {
width: 100%;
height: 20px;
background: orange;
position: absolute;
}
.orange::before,
.orange::after {
content: "";
position: absolute;
width: 20px;
height: 50px;
background: orange;
}
.orange::after {
right: 0;
height: 95px;
}
.orange:last-of-type {
bottom: 0;
transform: scale(-1);
}
.date {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
color: #FFF;
line-height: 0;
}
<div class="parent">
<div class="orange"></div>
<div class="date">
<h4>May</h4>
<p>2018</p>
</div>
<div class="orange"></div>
</div>
http://codepen.io/pen/YZdpgb
The pseudo-element after is on front of the div .rotate.
It seems that the z-index: -1 is not working
HTML
<div class="box--container">
<div class="box--rotate">
<div class="box">
<p>my background should be the light grey :(</p>
</div>
</div>
</div>
CSS
body {
height: 80vh;
margin: 10vh 10vw;
}
.box--container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.box--rotate {
position: relative;
width: 250px;
height: 250px;
transform: rotate(45deg);
transform-origin: 100% 150%;
background: #ccc;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #F2C398;
top: 15px;
left: 15px;
z-index: -1;
}
}
.box {
position: relative;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
z-index: 10;
}
try this one it's helpful https://jsfiddle.net/x061nock/ ::after use default color
I'm trying to create a rainbow circle with 8 segments, 45 degrees in size.
You'll notice that the orange segment is double the size of the others. I think these are number 1 and 8. I can't however figure out how to separate them. Are my degree wrong?
Thanks for your help.
body {
overflow: hidden;
}
.pie {
position: relative;
margin: 1em auto;
border: dashed 1px;
padding: 0;
width: 32em;
height: 32em;
border-radius: 50%;
list-style: none;
}
.slice1 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(-22.5deg) skewY(0deg);
}
.slice2 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(22.5deg) skewY(0deg);
}
.slice3 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(67.5deg) skewY(0deg);
}
.slice4 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(112.5deg) skewY(0deg);
}
.slice5 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(157.5deg) skewY(0deg);
}
.slice6 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(202.5deg) skewY(0deg);
}
.slice7 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(247.5deg) skewY(0deg);
}
.slice8 {
overflow: hidden;
/**/
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
transform: rotate(-67.5deg) skewY(0deg);
}
.slice-contents1 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #ffff4d;
text-align: center;
transition: background-color .5s;
}
.slice-contents2 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #9AC147;
text-align: center;
transition: background-color .5s;
}
.slice-contents3 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #639b47;
text-align: center;
transition: background-color .5s;
}
.slice-contents4 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #3869c3;
text-align: center;
transition: background-color .5s;
}
.slice-contents5 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #1e3868;
text-align: center;
transition: background-color .5s;
}
.slice-contents6 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #c682bb;
text-align: center;
transition: background-color .5s;
}
.slice-contents7 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #9a1d34;
text-align: center;
transition: background-color .5s;
}
.slice-contents8 {
position: absolute;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
background: #f7941e;
text-align: center;
transition: background-color .5s;
}
.slice1 .slice2 .slice3 .slice4 .slice5 .slice6 .slice7 .slice8 .slice-contents1 .slice-contents2 .slice-contents3 .slice-contents4 .slice-contents5 .slice-contents6 .slice-contents7 .slice-contents8 {
transform: skewY(40deg) rotate(25deg);
}
.slice-contents1:hover {
background: #ffff1a;
}
.slice-contents2:hover {
background: #8db23c;
}
.slice-contents3:hover {
background: #588a3f;
}
.slice-contents4:hover {
background: #2d549b;
}
.slice-contents5:hover {
background: #132340;
}
.slice-contents6:hover {
background: #ad4f9e;
}
.slice-contents7:hover {
background: #85192d;
}
.slice-contents8:hover {
background: #f38809;
}
<html>
<body>
<ul class='pie'>
<li class='slice1'>
<div class='slice-contents1'>#</div>
</li>
<li class='slice2'>
<div class='slice-contents2'>#</div>
</li>
<li class='slice3'>
<div class='slice-contents3'>#</div>
</li>
<li class='slice4'>
<div class='slice-contents4'>#</div>
</li>
<li class='slice5'>
<div class='slice-contents5'>#</div>
</li>
<li class='slice6'>
<div class='slice-contents6'>#</div>
</li>
<li class='slice7'>
<div class='slice-contents7'>#</div>
</li>
<li class='slice8'>
<div class='slice-contents8'>#</div>
</li>
<ul>
</body>
</html>
Ohh thats obvious ... you are using square element(li) and rotating it in different angles to make that pi..
According to your design each li div will be of 90 Degree ,while 45 degree of every will be hidden by other element,
for every element upto slices 7 will work good but slice 8 of angle=90.will cover yellow colored element.
take your fiddle for example ..you will notice only yours orange element(slice 8) is of 90 degree and rest are good except yellow(slice 1 ) that was hidden inside your slice 8.
to solve it you should reduce your arc to make it fit..
Make changes to following ..your pie will be go to go
.slice-contents8 {
position: absolute;
left: -100%;
width: 200%; height: 200%;
border-radius: 50%;
text-align: center;
transition: background-color .5s;
background-image: linear-gradient(135deg, transparent 50%, #f7941e 50%), linear-gradient(90deg, white 50%, transparent 50%);
}
.slice8 {
overflow: hidden; /**/
position: absolute;
top: 0; right: 0;
width: 50%; height: 50%;
transform-origin: 0% 100%;
transform: rotate(-112.5deg);
}
see the below demo
Working Fiddle