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;
}
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!
This is how it was done in Bootstrap 3:
.modal.fade .modal-dialog {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
Or something like this would have worked as well:
.modal.fade .modal-dialog {
transform: translate3d(0, -25%, 0);
}
.modal.in .modal-dialog {
transform: translate3d(0, 0, 0);
}
The magic obviously happened in the modal classes with the transform property. But this does not work in Bootstrap 4. I am specifically using Bootstrap v4.0.0-alpha.5. What changes do I need to make to achieve the same effect?
Demo url - https://jsfiddle.net/qww47vfn/
Found it, apply the following CSS:
.modal.fade .modal-dialog {
-webkit-transform: translate(0,25%);
-ms-transform: translate(0,25%);
-o-transform: translate(0,25%);
transform: translate(0,25%);
}
I've inverted the transform origin, instead of -25%, it's now 25% (effectively making it fade in from below). Adjust the amount to adjust the initial fade in position.
What changed?
Instead of translate3d the property translate is now being used, so changing the original values won't matter since the model listens to the new properties now.
Side note:
This doesn't work when you implement it as a new rule for some reason, I don't have a local version of bootstrap, but changing it inside the DevTools solved it for me. I suppose you need to overwrite the initial code to change it.
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.
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?
Is it possible to slowly rotate parts of a page (in this case a single class) via CSS? My current code:
.c1
{
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
}
Unfortunately there is no way to use javascript for this, with the amount of access I have.
Is there a way to rotate this class on rollover or if the mouse is on top of it, or just simply rotate? This must be done entirely via CSS.
Thanks for the help! I know this is a strange request, but I hope to find an answer.
For Firefox :
-moz-transform: rotate(15deg) scale(1.25, 0.5);
transform: rotate(15deg) scale(1.25, 0.5);
For Chrome , Safari and Opera :
-webkit-transform: rotate(15deg) scale(1.25, 0.5);
And Internet Explorer Doesn't support this :]
There are some good hints and tips on this page for Firefox. :)
Something like:
.transformed {
-webkit-transform: rotate(15deg) scale(1.25, 0.5);
-moz-transform: rotate(15deg) scale(1.25, 0.5);
transform: rotate(15deg) scale(1.25, 0.5);
}
Which is what you have, but note that Firefox only supports it from v3.1 and up. :)