desandro/3dtransforms

:package: Introduction to CSS 3D transforms

3dtransforms's Issues

Carousel with Cube

Can I make the Carousel with Cube and make the cube rotate?
Can I make other objects?
something like this: https://sketch.london/

Added cross-browser and touch-screen events

I've much appreciated David Desandro's great tutorials on the 3D cube. Recently, I added a few corny wrinkles for my own instruction. They might be of interest to others:
https://github.com/BeigeMan/Cube-Clock
https://codepen.io/BeigeMan/pen/zrwyww

transform-origin and Safari

Hello,
I am trying to use your code. The only exception is, the front face is at level 0, and the back-face is at level (-cubeWidth)px.
In order for it to work, the transform-origin must be put to center center -cubeWidth / 2.
However, it seems that management of perspective is totally screwed (in all senses of the term) when transform-origin is changed, under Safari. I created an entry on stackoverflow : http://stackoverflow.com/questions/43536900/transform-origin-and-perspective-with-safari

It is not a problem on your code stricto sensu, but do you have any idea how to solve this problem, as you are the expert in css 3D transforms?

Best Regards,
Joel

flipped opacity

Replace with Images

Hello,

The code works fine. I was trying replace the divs with images, as shown below. As a result, the cube looks as expected seemed to flip uunpredictably, coming closer to the user for the front, right, top and bottom, and further back when showing back and left. It seem to take the shortest path and not rest on a single set of axis. Any help would be much appreciated.

Thanks!

        <!-- <div class="cube__face cube__face--front">front -->
                <img class="cube__face cube__face--front smaller-image thin-img-border" src='./Image.jpeg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--back">back -->
                <img class="cube__face cube__face--back smaller-image thin-img-border" src='./Image.jpg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--right">right -->
                <img class="cube__face cube__face--right smaller-image thin-img-border" src='./Image.jpg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--left">left -->
                <img class="cube__face cube__face--left smaller-image thin-img-border" src='./Image.jpeg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--top">top -->
                <img class="cube__face cube__face--top smaller-image thin-img-border" src='./Image.jpg' alt="Image">
        <!-- </div>
        <div class="cube__face cube__face--bottom">bottom -->
                <img class="cube__face cube__face--bottom smaller-image thin-img-border" src='./Image.jpg' alt="Image">
        <!-- </div> -->
    </div>

Card Flip Not Working in Safari

Hi Desandro,

I love your Card Flip tutorial, and it works great in Chrome and Firefox, but apparently not in Safari. (I'm running Safari 13.1.3).

In Safari, the backside text always displays in reverse, and when the transition from front to back is complete, the front suddenly becomes visible again (reversed). We can never see the backside unless it's transitioning, and the front is displayed backward when we should be seeing the backside.

Is there a fix you can suggest?

Thanks!

-Mike

Error in explanation

On the page: https://3dtransforms.desandro.com/cube
the following sentence:

"Now all the faces are placed on top of one another, ready to be rotated. .cube__face--left and .cube__face--right will use rotateX() so they are rotated around the vertical X axis."

should be:

"Now all the faces are placed on top of one another, ready to be rotated. .cube__face--top and .cube__face--bottom will use rotateX() so they are rotated around the vertical X axis."

Right?

Increase or decrease carousel item

How will i increase or decrease carousel item without browser refresh?

In Firefox, card examples not showing blue 2 side

These examples are not showing the blue 2 side in Firefox.

http://desandro.github.com/3dtransforms/examples/card-01.html
http://desandro.github.com/3dtransforms/examples/card-02-slide-flip.html
http://desandro.github.com/3dtransforms/examples/card-03-slide-flip-2-ways.html

js/rotate-box.js

Hello Desandro,

Much appreciation for your work. I was building my spouse an interactive web page using your unique rotating cube design. But I noticed after a recent update file "https://desandro.github.io/3dtransforms/js/rotate-box.js" no longer exists. I cannot discover the solution to remedy my project even when referencing the repository. Here is an example https://codepen.io/ChaseBoland/pen/odjaxB

Thank you for the support

A quick sidenote

Hi,
I didnt looked over all the project, only how to flip the card.

and i noticed that https://desandro.github.io/3dtransforms/examples/card-01.html used a js library.
after a quick search i found this: https://stackoverflow.com/questions/14615712/toggle-classname-onclick-javascript

dunno if is interesting to have it without dependencies, but sharing:

<script>
document.getElementById('flip').onclick = function() {
  var card = document.getElementById('card');
    var className = ' ' + card.className + ' ';

    card.className = ~className.indexOf(' flipped ') ?
                         className.replace(' flipped ', ' ') :
                         this.className + ' flipped';
}
</script>

Best regards,

Can't seem to have 2 card flips.

When I try to create 2 card flips, the first flip works, but the second does not.

What can be done to enable 2 or more card flips on the same page?

Thanks very much

Add support for all vendors

3D transforms are expected to be supported by Firefox, IE, and Opera in the near future. Right now the demos and docs are only for -webkit-transform. Other vendor prefixed props should be added, and JS needs to be updated as well. Docs should be updated to talk about wider support.

Error in example code

The example code for the box on the page: https://3dtransforms.desandro.com/box

.box {
width: 200px;
height: 300px;
}

should be

.box {
width: 300px;
height: 200px;
}
The code on codepen is right, but not in the example code.

IE10 possible bug

From Eric via email

Using your extremely helpful guide (http://desandro.github.io/3dtransforms/docs/card-flip.html), I was able to build a flashcard study tool for my students, that works on most browsers and tablets. I had largely ignored IE, as my other tools did not work in that browser either, but after some quick workarounds, I was able to solve those problems.

Unfortunately, I have not been so lucky with your card flip demo. At first, I thought it was something to do with my code, but both of our sets of code perform the same on IE 10:

1. Card loads fine.
2. User "flips" the card
3. The back side flips, but the text is reversed--mirrored--in IE 10.

Any idea on a work around for this? I tried adding the "-ms" vendor properties to each respective CSS property, but that did not work.

Carousel Demo doesn't work in IE11

I just tried the carousel demo here

http://desandro.github.io/3dtransforms/examples/carousel-01.html

in IE 11. Unfortunately, it doesn't seem to work, all the numbers on the panels are backward:

And if you click the next/previous buttons, it doesn't rotate the carousel, but rather flips the entire thing as if it were flat:

If you don't have IE 11, I'd be glad to help testing/debugging, but I would need some pointers where to start, as I haven't been doing much with 3d in CSS yet

Typo in the `perspective` page

I found that there's a _typo_ under Example: Perspective 1. In the parentheses of second sentence, the rotateX should be rotateY.

Besides, Thanks for your great tutorial.

How to get the property translateZ?

hi:

Is there any materials which talk about why you choose translateZ(100px) in cube and translateZ(50px) in a box.
And when I want do some 3d effects, how can I chose a proper value of translateZ.

thanks.

Additional Interaction : Allow sliding of finger to roll the next side

Slide Finger rotates up down left right and changes the cube accordingly.
Is there a standard lib for finger detection?

Event firing when 3D Transform complete

Trying to find a way to fire an event via jQuery/JS when the card flip animation is complete, but not having much luck. I have tried the following code:

$("#card.flipped").one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) { alert('animation over baby') });

and some other variations of it, but nothing is happening. Peeked into your utils.js and I can't make anything happen either.

What I want to achieve is having a card flip including the button being part of it. Just want to hide the button for the duration of the animation and then make it reappear when animation is over. Obviously putting button on the 'front' and 'back' is not an option. Best to post my example https://rawgit.com/SLQ-web/Packery-Mockup-SLQ-Homepage/Wacky-draggabilly/html/whats-on-flickity.html - check out the "Question of the Day" section to see what I mean (have the complete Packery grid item flip).

Is there any way to achieve this with your 3D Transform & Packery Libraries?

Possible correction in cube.html doc

Quoting you:
"...#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }
Note here that the translateZ function comes after the rotate. The order of transform functions is important. Take a moment and soak this in. Each face is first rotated towards its position, then translated outward in a separate vector."
Does this need correction? Isn't the transform order right to left? I think in this case translateZ is what will happen first and then the rotateZ tranform will be applied on the face which was just translated in Z.

backface-visibility in 3D cube

Issue: Applying a cube rounded corners, the content behind is shown.

What I want: Perform a cube with rounded corners, create the effect, or even better, perform a cube with filled content.

What I need: To fill the whole content inside the cube, make the cube looks like is filled.

https://codepen.io/fglez94/pen/WNjBXxd

ProxyRange not working in Firefox

The range input polyfill doesn't seem to trigger the change event.

Hello, I use bootstrap when I wanted to refer to the file, but it does not achieve Responsive web design, Is there a way to achieve automatic scaling this stuff does not destroy the original animated it? I saw inside the parameters of absolute size px, I want it to become relative size, if you look at this idea feasible it?

Hello, I use bootstrap when I wanted to refer to the file, but it does not achieve Responsive web design, Is there a way to achieve automatic scaling this stuff does not destroy the original animated it? I saw inside the parameters of absolute size px, I want it to become relative size, if you look at this idea feasible it?

Carousel 2 adding panel not working in Firefox

See http://desandro.github.com/3dtransforms/examples/carousel-02-dynamic.html in Firefox Aurora

Responsive

Is it possible to make such a 3D graphics scalable or responsive?

Children perspective example doesn't have same vanishing point in Firefox

In Firefox 11.0a2, the vanishing point in the children example doesn't line up as it should. There must be something I'm missing as other examples have the same vanishing point.

http://desandro.github.com/3dtransforms/examples/perspective-02-children.html

@louisremi - would you mind taking a look?

Responsive Example with CSS Variables

Hi!
I stumbled over this blog while trying to figure out how all this 3d transformation stuff in CSS works.
Since this box didn't meet my requirements I tried to figure out how to change the different scale factors.
After figuring it out I created a CodePen where you can change the main three variables (height, width, depth) to dynamically change the dimensions of the Box.
I thought, since I stumbled over this, maybe it can be of help for somebody else out there!

https://codepen.io/3m7ecc/pen/JjwQqKB