I've come across a strange problem with the way Edge (and IE 11) handles my matrix3d transform. The page I'm working on has elements that already have an arbitrary transform applied to them (due to a plugin being used), however thanks to my manager I now need to apply a 180 degree rotation around the Y axis on top of this. Because of this, I could not simply use the rotateY() function as it replaced the old transform and moved the element, so I figured I'd need to use matrices. This works fine in Chrome and Firefox, but Edge doesn't seem to handle matrix3d in the same way.
Here's an example of using rotateY: http://codepen.io/anon/pen/wGqapy
(HTML)
<body>
<div class="flip-container">
<div class="front">
Test
</div>
</div>
</body>
(CSS)
.flip-container,
.front {
width: 320px;
height: 480px;
}
.front {
transition: 0.6s;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: green;
}
.flip-container:hover .front
{
transform: rotateY(180deg);
}
When you mouse over the element, it rotates around the Y axis in 3D space. And here's an example of using matrix3d, using the same matrix shown in the "computed CSS" tab in Edge: http://codepen.io/anon/pen/QNMbmV
(HTML)
<body>
<div class="flip-container">
<div class="front">
Test
</div>
</div>
</body>
(CSS)
.flip-container,
.front {
width: 320px;
height: 480px;
}
.front {
transition: 0.6s;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: green;
}
.flip-container:hover .front
{
transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}
This, however, seems to spin around more than one axis. This does not occur in Firefox or Chrome. Am I supposed to use some magical vendor-specific CSS? I've been unsuccessful in searching SO or Google, so I hope someone has some insight!
Thanks in advance.
Matrices are very good for calculus, and for setting the transforms in an universal way. But aren't so good when you are transitioning from one state to the other.
a simple animation as
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
is impossible to set with matrices
Also, take into account that even using matrices, you can chain them with others transforms.
All that said, let's see an example of your rotation working on a previously transformed element
.flip-container,
.front {
width: 320px;
height: 480px;
}
.front {
transition: 0.6s;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: green;
/* transform: rotate(10deg); is equivalent to matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0) */
transform: matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0) rotateY(0deg);
}
.flip-container:hover .front {
transform: matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0) rotateY(180deg);
}
<div class="flip-container">
<div class="front">
Test
</div>
</div>
Related
I'm using Elementor Pro and wanted certain images to zoom within the div container and had a shine on them when hovering, so upon asking for help someone wrote this code for me, but it didn't scale the image. I added the transform property to scale it, but I don't know how to keep it within the container. I also wanted the transition to be smooth so I also added the transition property which doesn't seem to work at all. This is my first time asking asking a question here and I do not have a coding background so I apologize if I say something wrong.
.shine-test::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
content: '';
transition: all 0.6s;
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);
}
.shine-test:hover::before {
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);
}
.shine-test:hover {
transition-timing-function: ease-in-out;
transition-duration: .6s;
}
.shine-test:hover {
transform: scale(1.2)
}
You need JavaScript if you want to change the size of the wrapper, because things changed by scale keeps their original 'box'.
Although if you knew the size you were scaling it to you can do something like this:
Box = 40*40
Scale 1.5 = Box width 60*60
.box {
width: 40px;
height: 40px;
}
.box.scaled {
width: 60px;
height: 60px;
}
.box.scaled > .shine-test {
transform: scale(1.5);
}
The code is from Bootstrap carousel, I wonder why without display:none, css3 transition not working? It should move from right to left.
Thanks! https://jsfiddle.net/25d3ga9j/11/
I want to remove .item{display:none}, and add visibility: hidden, then keep it working. It works in Firefox(transition-property: left),but not in Chrome(transition-property: transform;transform: translate3d...)
https://jsfiddle.net/zjmove/r8ejf5Lk/
$('.item').addClass('next')
$('.item')[0].offsetWidth // force reflow
$('.item').addClass('left')
.item {
height: 100px;
background: red;
display: none; //why with out display:none, transition not working?
}
.c {
overflow: hidden;
}
.item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000px;
}
.item.next {
display: block;
transform: translate3d(100%, 0, 0);
left: 0;
}
.item.next.left {
transform: translate3d(0, 0, 0);
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="c">
<div class='item'>
</div>
</div>
There is a few things going on here, where the first is whether the first script line might run before the DOM is ready $('.item').addClass('next')
The second, there is no time for the first class to finish its transition until the second gets added, but a delay might solve that.
Either way, and based on whether which comes first (may vary between browsers), you can get different result.
The below sample shows how it should be set up when not using display: none, which by the way should be avoid if possible
$(window).load(function() {
$('.item').addClass('left')
});
.c {
overflow: hidden;
}
.item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000px;
transform: translate3d(100%, 0, 0);
height: 100px;
background: red;
}
.item.left {
transform: translate3d(0, 0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c">
<div class='item'>
</div>
</div>
I've got a series of elements, as shown in the image below:
They are rotated 45 degrees to one side (the content inside -45 degrees, to remain upright).
Now I'd like to rotate each element around a vertical axis, going through the element's center. RotateY doesn't work, as it is at a 45-degree angle.
How would you go about doing this?
The trick is to set this rotation before the 45 degrees rotation:
Notice also that to make the rotation behave really as expect, you need to set it to 0 in the base state
.container {
width: 200px;
height: 200px;
margin: 100px;
border: solid 1px;
transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
transition: transform 2s;
}
.container:hover {
transform: rotateY(180deg) rotate(45deg); /* notice the order */
}
.inner {
margin: 50px;
transform: rotate(-45deg);
}
<div class="container">
<div class="inner">INNER</div>
</div>
This is how I interpret the question. I'm not very happy with the demo since it needs a lot of structure.
But maybe you can verify the behavior?
Basically I use a wrapper to rotate on the y-axis.
It is key to set the transform origin to the center.
The additional wrapper is used to prevent a flickering on mouse hover.
https://jsfiddle.net/nm59mqky/1/
.tile {
transform: rotateY(0);
transform-origin: center center;
}
.wrapper:hover .tile {
transform: rotateY(180deg);
}
I dont know exactly what your code looks like, but for a simple spinning tile (div) i would try something like this:
#keyframes rotate-vertical {
0% {
transform: rotate3d(0, 1, 0, 0deg);
}
100% {
transform: rotate3d(0, 1, 0, 360deg);
}
}
body {
padding: 20px;
}
.tile {
width: 65px;
height: 65px;
background-color: red;
text-align: center;
transform: rotate3d(0, 0, 1, 45deg);
display: inline-block;
}
.turndiv {
width: 65px;
}
.turndiv:hover {
animation: rotate-vertical 1.1s ease-out;
}
<div class="turndiv">
<div class="tile">
</div>
</div>
You could just do it with transform: rotate3d(); and without a parent div, but to keep it easy i did it like this.
I have a layout like this:
<div class="parent">
<div class="wrapper">
<div class="child">
<h1>Sticky text</h1>
</div>
</div>
</div>
CSS:
.parent {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.wrapper {
width: 1024px;
display: block;
}
.child {
-webkit-transform: translateY(-80px);
-ms-transform: translateY(-80px);
transform: translateY(-80px);
transition: transform .5s ease;
z-index: 31;
position: fixed;
left: 0;
right: 0;
top: 100%;
}
Since parent has transform of 0 my child wont stay fixed. However if i remove parent transform the child get's sticked just fine. is there any way around this? without deleting the transform of the parent? Maybe flex?
I'm trying to use CSS3 to create a similar circulating example like the flying unicorn in the below link:
http://css-tricks.com/examples/Circulate/
The unicorn example utilizes jQuery, which is fun and all but I was hoping to pull it off with either animation, transform or translate or something else. So far all I can do is have my div swing around like a propeller. I've searched all around for an answer and tried a number of things on my own but nothing has worked.
Help!
Here is my solution
Working Codepen Demo
HTML
<div class="wrapper">
<div class="circle"></div>
</div>
CSS3
.circle {
background:grey;
border-radius:100%;
width:50px;
height:50px;
position:absolute;
top:50%;
left:0;
animation: rotate 10s linear infinite;
transform: rotate(45deg) translateX(150px) rotate(-45deg);
}
#keyframes rotate {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
May be you can find better solution, This is my way of doing it. Hope it help you to understand better.
You can achieve this using 3d transforms.
A solution for Chrome:
.container {
-webkit-perspective: 600px;
-webkit-perspective-origin-x: 300px;
position: absolute;
left: 300px;
top: 85px;
width: 300px;
height: 100px;
background-color: lightblue;
-webkit-transform: translateZ(10px);
-webkit-transform-style: preserve-3d;
}
.test {
position: absolute;
width: 100px;
height: 100px;
left: 100px;
background-color: red;
border-radius: 50%;
-webkit-animation: orbit 4s infinite linear;
-webkit-transform: rotate3d(0, 1, 0, -89deg) translateX(300px);
z-index: -1;
}
#-webkit-keyframes orbit {
0% {-webkit-transform: rotate3d(0, 1, 0, 0deg) translateX(200px) rotate3d(0, 1, 0, 0deg);}
100% {-webkit-transform: rotate3d(0, 1, 0, 360deg) translateX(200px) rotate3d(0, 1, 0, -360deg);}
}
demo
You will have problems porting the full demo to IE (the part about the circle hiding behind the rectangle)