I am trying to create a "cube" effect where i can toggle between three objects and create the feeling of turning a cube.
Works fine with 2 sides, but i am stuck trying to add a third. Can someone please explain why the third site floats away?
I guess i am doing something wrong with item-3? But i just can't figure it out
.item-1{
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.item-2{
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
.item-3{
-webkit-transform: rotateX(-180deg) translateZ(-50px);
transform: rotateX(-180deg) translateZ(-50px);
}
Live example:
http://jsfiddle.net/esbeka9t/
There you go:
Just change your .item-3 class like this:
-webkit-transform: translateZ(-50px) rotateX(-180deg) translateY(200px);
transform: translateZ(-50px) rotateX(-180deg) translateY(200px)
It seems your .items are positioned relative to each other. Giving .item a position: absolute, a fixed width and changing the translate values just a bit on your .item classes should solve the issue. Here is a modified version of your example to illustrate this.
Related
I made a little CSS animation with a simple svg to transition my hamburger menu to a cross. It works as expected on Chrome and Firefox, but the translation is off in Safari. The animation plays, and even resets correctly so it has nothing to do with prefixes (I tried). The translate of the two lines making the cross is just wrong.
I'm guessing it has something to do with how safari handles the transform when scaling is also applied. Does anyone know if there is a work around / or what I'm doing wrong?
JSFiddle
Safari / Firefox / Chrome
#keyframes showCross {
0% {
transform: scale(1) rotate(0);
}
40% {
transform: scale(0.3) rotate(280deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
#keyframes showCross_P1 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-45deg) translate(-42%, -10%);
}
}
I fixed it by doing the following:
First I removed the groups surrounding the paths.
Then I gave all the paths the following values:
transform-origin:center center;
transform-box: fill-box;
Next I edited the animation keyframes to look as follows:
0% {
transform: translate(0rem,0rem) rotate(0);
}
100% {
transform: translate(-10rem,-38rem) rotate(-45deg) ;
}
Safari has problems with percents and also if you put the rotation before the translate it has inconsistency with other browsers, use rem instead!
I'm trying to animate an element back and forth, with a flip at each end. I'm using a CSS animation with scaleX(-1) at the end. It works fine in everything but IE, where it's shooting the element all the way off the page, then sliding it back into position.
#keyframes moveAndFlip {
48% {
transform: translateX(12vh) scaleX(1);
}
50% {
transform: translateX(12vh) scaleX(-1);
}
98% {
transform: translateX(0) scaleX(-1);
}
}
http://jsfiddle.net/pq9yqscy/2/
Is this a known issue in IE? Another way to tackle it?
My Chrome console returns Invalid CSS property name to a transform-origin CCS attribute as the site loads even though it works and I have a -webkit- prefixed version.
The target CSS looks like this:
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
Is it really an issue?
I've found the origin of my issue.
The problem is that -webkit- browsers don't accept the transform-origin attribute when it is isolated from a supporting attribute (an attribute that actually uses the transform-origin).
So, for example, if I use something like this, -webkit- assumes it is wrong:
#divOne{
transform-origin:50% 50%;
animation:jump 1s ease both;
}
#keyframe jump{
from { transform: translateX(-20%) rotateY(-90deg); }
to{ transform: translateX(0%) rotateY(0deg); }
}
It is wrong because the origin attribute is detached from the transform that is going to take use of it. Even though it works, it is not entirely correct on the browser's perspective.
It should be something like this to be correct:
#divOne{
animation:jump 1s ease both;
}
#keyframe jump{
from { transform: translateX(-20%) rotateY(-90deg); transform-origin:50% 50%; }
to{ transform: translateX(0%) rotateY(0deg); transform-origin:50% 50%; }
}
Where both transforms are together on the same element.
The answer to your question in simple terms is 'NO'. It is a perfectly valid property. There must be something else that's causing the error.
Read this:
https://docs.google.com/document/d/1UsKm0ywILw9cuTRYlkhqMYTdzNcih6sO15u1eCzGgP8/edit?pli=1#
and this
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#Browser_compatibility
I made a wedding invitation and there's a code at the bottom of the invitation to log into the wedding website. To make people aware of the code I created a little CSS3 3D animation: see the demo
HTML:
<section id="viewport">
<div id="invitation" class="show-front">
<figure class="front"></figure>
<figure class="ring"></figure>
</div>
</section>
CSS:
section#viewport {
-webkit-perspective: 1000;
-webkit-perspective-origin: 0% 0%;
}
div#invitation {
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s ease;
}
#invitation .front {
-webkit-transform: rotateX(12deg) translate3d(0px, 0px, 32px);
#invitation .ring {
-webkit-transform: rotateY(-90deg) translate3d(6px, -15px, -1px);
}
#invitation.show-front {
-webkit-transform: rotateY(-24deg) rotateX(90deg);
}
#invitation:hover {
-webkit-transform: rotateY(20deg) rotateX(3deg);
}
In Chrome and Firefox looks everything well, but in Safari the intersecting elements produce an annoying flicker issue. If I remove the rings which are intersecting the front picture element the flicker issue don't appear: the demo without rings
I've tried everything and read every post I could find, but nothing solved this problem. All useless html elements in the demo aren't useless in my real animation.
When trying to apply a CSS transform with perspective I encounter a weird glitch in that the top half of the divs are unselectable. I have created a a quick demo here on jsfiddle
[The top selection of red boxes should be clickable and such]
Does anyone know how to fix this? I've looked at other similar errors but their solutions don't seem to work here.
Cheers
This should do the trick
.ca-item {
-webkit-transform: skewX(-5deg) scale(1, 1);
-moz-transform: skewX(-5deg) scale(1, 1);
-ms-transform: skewX(-5deg) scale(1, 1);
transform: skewX(-5deg) scale(1, 1);
background-color: blue;
position:relative;
width:1060px;
height:550px;
text-align:center;
}