I am trying to make an opening book animation with CSS transitions similar to a card flip animation except with another card behind it.
When I create a single card flip it works fine in chrome. But if I put it inside a parent div in order to place another card behind it the back of the card no longer shows.
HTML
<div class="scene">
<div class="turncard">
<div class="turncard-front">
<div class="turncard-outside turncard-side">
Front!!!<br/>I don't work
</div>
<div class="turncard-inside turncard-side">
Back!!!<br/>Can you see me?
</div>
</div>
</div>
</div>
CSS
.scene {
margin-left: 200px;
perspective: 6000px;
}
.turncard {
width: 200px;
height: 200px;
margin-top: 50px;
transform-style: preserve-3d;
}
.turncard-front {
height: inherit;
width: inherit;
transition: transform 0.6s;
transform-origin: top left;
}
.turncard-side {
height: inherit;
width: inherit;
position: absolute;
backface-visibility: hidden;
background-color: green;
text-align: center;
}
.turncard-outside{
z-index: 1;
}
.turncard-inside {
transform: rotateY(180deg);
z-index: -1;
}
.turncard-front:hover {
transform: rotateY(180deg);
}
Both the working version (without a parent div) and non-working example (with the div) are shown in this fiddle: http://jsfiddle.net/bxLa4kwu/1/
Stick this property on .turncard2-front:
transform-style: preserve-3d;
http://jsfiddle.net/bxLa4kwu/3/
This property tells it to preserve the 3D position of children of the turncard2-front element (e.g. inside and outside of the page) when turncard2-front is css transformed.
Be aware this doesn't work in IE11 as the property isn't supported (but you probably knew that as the first example doesn't work either in IE).
Related
I'm working on site where I need to animate divs that move over a sibling and apply a mix-blend-mode. I'm working with a library that create 2 divs the wrap around the blending element. The library also adds a transform to the direct parent, which is now breaking the blending. I figured this might relate to a stacking issue, but no matter how many/where I add a transform3d(0,0,0 ) the blend is still broken.
Due to the constraints of the library, I can't do much about of the wrappers or that the background is a sibling of the outermost wrapper.
If you toggle the requiredParent2 transform, everything works (as stated, this transform is added by a required library).
Additionally there are siblings to the blending element (mixBorder, which prevents me from moving the blending to the requiredParents)
Fiddle also here: https://jsfiddle.net/hb7qaod6/5/
.bg,
.root,
.requiredParent1,
.requiredParent2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.requiredParent2 {
transform: translate3d(0px, 2px, 0px);
}
.bg {
background-color: red;
}
.mix,
.mixBorder {
position: absolute;
top: 50%;
left: 50%;
width: 25%;
height: 25%;
}
.mix {
background-color: white;
mix-blend-mode: difference;
}
.mixBorder {
outline: white solid thick;
}
<div class="root">
<div class="bg"></div>
<div class="requiredParent1">
<div class="requiredParent2">
<div class="mix">
</div>
<div class="mixBorder">
</div>
</div>
</div>
I'm trying to create a parallax header for my wordpress site, i'm using the divi theme.
Here is my code:
HTML:
<div class="parallax">
<div class="parralax__layer parallax__layer--back">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>>
<div class="parralax__layer parallax__layer--base">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>
</div>
CSS:
.parallax {
perspective: 1px;
height: 25vh;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.parallax__layer {
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
transform-style: preserve-3d;
}
.parallax__layer--base {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--back {
transform: translateZ(-15px) scale(2);
}
My problem is that my header has this seperate scroll bar because it's in its over DIV to the rest of my page, the parallax effect works fine with overflow set to auto, but when I turn it off it breaks the paralax effect.
How do I get the header element to scroll with the rest of my page while still keeping the overflow set to auto?
You can see the problem I'm having here:
https://crispimages.co/home/
you can add the following style rule:
.parallax::-webkit-scrollbar {
display: none;
}
This will solve your problem. But as you can see its vendor prefix dependent. So it will only work in webkit browsers.
I'm trying to do a 3D rotation in CSS3 on a parent container...e.g. -webkit-transform: rotateY(30deg), but reverse the rotation on children e.g. -webkit-transform: rotateY(-30deg). I want the children to be "flat" from the viewer's perspective. When I apply the rotation on the child, something changes, i.e. it's rotating to some extent, but not correctly. I'm pretty sure my problem is either to do with the perspective-origin OR the transform-origin, but I can't quite work out how to set the values of either to solve it. I've created a fiddle to demonstrate the problem.
http://jsfiddle.net/bobsmells/ndn83/2/
Just to confirm, I want the child divs to still exist in the same 3D space, i.e. the one to the right should still appear smaller because it's further away, but I want both children to have no rotation.
<div class="grandparent">
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
.grandparent{
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 50% 50%;
}
.parent {
position: relative;
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotateY(30deg) ;
}
.child1 {
position: absolute;
top: 20px;
left: 20px;
background-color: green;
width: 50px;
height: 50px;
-webkit-transform: rotateY(-30deg) ;
}
.child2 {
position: absolute;
top: 20px;
left: 120px;
background-color: green;
width: 50px;
height: 50px;
-webkit-transform: rotateY(-30deg) ;
}
You have to set -webkit-transform-style: preserve-3d in the parent; if it is in the grand parent doesn't affect the children.
(Probably it should "cascade", but it just doesn't).
Once you do it, you will find that the children are invisible, because they are behind the parent, but that's another story. Make the parent semitransparent and you will see them.
I am having trouble preventing two elements clipping when using 3D CSS transforms. Has anyone come across this before and found a solution?
I have attached a screenshot from the latest version of iOS to illustrate the issue - It also occurs on the desktop version of Safari, but not Chrome on OS X.
I understand why this happens, and even that this is the correct behaviour in some circumstances, but it is inconsistent across different browsers.
Thanks for any help :)
This is caused by rendering both elements within the same 3d layer. The solution is to render them each in their own layer.
This is a simplified version of the code which caused the issue:
CSS:
.wrapper {
transform-style: preserve-3d;
perspective: 1000;
}
.rotate {
width: 100px;
height: 100px;
background: grey;
transform: rotateX(45deg);
}
.clipped-element {
width: 30px;
height: 30px;
background: blue;
}
HTML:
<div class="wrapper">
<div class="rotate">
<div class="clipped-element"></div>
</div>
</div>
By using transform-style and perspective I've created a rendering layer. As the .clipped-element is part of this layer it exists in the same 3d space.
By moving the clipped element into it's own layer it exists in it's own 3d space and the clipping issue is avoided.
CSS:
.wrapper {
width: 200px;
height: 200px;
}
.rotate__wrapper {
width: 100%;
height: 100%;
transform-style: preserve-3d;
perspective: 1000;
}
.rotate {
width: 100px;
height: 100px;
background: grey;
transform: rotateX(45deg);
}
.clipped-element {
width: 30px;
height: 30px;
background: blue;
}
HTML:
<div class="wrapper">
<div class="rotate__wrapper">
<div class="rotate"></div>
</div>
<div class="clipped-element"></div>
</div>
I've created an example on CodePen.
I'm trying to make a splash page on my website with 2 large buttons, each a right angled triangle, and both join by the longest side to create a square. Basically I'm looking to find out how to make non-rectangular buttons in css.
I have no idea if this is even possible though, and cannot find anything online explaining similar techniques for buttons which are not rectangular, and i'm not particularly skilled in css. A push in the right direction would be very helpful!
A very old (unanswered question) deserves an answer.
You could use a nested div element in which the parent has an overflow set to hidden, with the child element rotated.
Here is a basic example: (please note: jQuery only required for demo)
$('.tri').click(function() {
alert("triangle clicked!");
});
.wrap {
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
margin: 2px auto;
}
.wrap .tri {
position: absolute;
height: 70%;
width: 70%;
background: tomato;
transform-origin: bottom left;
bottom: 0;
transition: all 0.6s;
left: 0;
cursor: pointer;
transform: rotate(45deg);
}
.wrap2 {
transform: rotate(180deg);
}
.wrap .tri:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="tri"></div>
</div>
<div class="wrap wrap2">
<div class="tri"></div>
</div>