I’ve got a CSS cube that is working, however because translateX is used for side panels… when you spin the cube, elements are not interactive (broken). They render just fine but links can’t be clicked on. I know why this is happening but I’m wondering if there has been any published examples of cubes where they don’t use translateX.
I’ve come up with other solutions, but they don’t animate as cleanly.
Here’s an example to see what’s going on
http://jsfiddle.net/2M8bW/1/
Thanks for any help.
HI,
Do you have an example we can play with 
I have an old example here of a spinning cube and I just added some links to it and they were clickable ok.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rotate Dice with css transforms</title>
<style type="text/css">
body { padding:220px; }
body>div {
-webkit-perspective: 2000px;
-webkit-perspective-origin: 500px 500px;
-moz-perspective: 2000px;
-moz-perspective-origin: 500px 500px;
}
body>div>div {
position: relative;
width: 200px;
height: 200px;
font-size:90px;
text-align:center;
line-height:200px;
color:#fff;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 50% 50%;
}
body>div>div div {
position: absolute;
width: 200px;
height: 200px;
border-radius:2px;
-webkit-transform-origin: 50% 50%;
-webkit-transition: all 2s;
-moz-transform-origin: 50% 50%;
-moz-transition: all 2s;
background-color:red;
box-shadow:0 0 55px rgba(0,0,0, 0.4),inset 15px 15px 50px rgba(0,0,0, 0.6);
border-radius:5px;
}
body>div>div div {
width:300px;
height:300px;
color:#fff;
font-size:300px;
line-height:30px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
body>div>div div:nth-child(1) { -webkit-transform: translateZ(150px); -moz-transform: translateZ(150px);}
body>div>div div:nth-child(2) { -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);-moz-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);}
body>div>div div:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(150px);-moz-transform: rotateY(90deg) translateZ(150px);}
body>div>div div:nth-child(4) { -webkit-transform: rotateY(-90deg) translateZ(150px);-moz-transform: rotateY(-90deg) translateZ(150px);}
body>div>div div:nth-child(5) { -webkit-transform: rotateX(90deg) translateZ(150px);-moz-transform: rotateX(90deg) translateZ(150px);}
body>div>div div:nth-child(6) { -webkit-transform: rotateX(-90deg) translateZ(150px);-moz-transform: rotateX(-90deg) translateZ(150px);}
@-webkit-keyframes spindice { from, to {
}
16% {-webkit-transform: rotateY(-90deg);}
33% {-webkit-transform: rotateY(-90deg) rotateZ(90deg);}
50% {-webkit-transform: rotateY(270deg) rotateZ(270deg);}
66% {-webkit-transform: rotateY(90deg) rotateX(90deg);}
83% {-webkit-transform: rotateX(180deg);}
}
@-moz-keyframes spindice { from, to {
}
16% {-moz-transform: rotateY(-90deg);}
33% {-moz-transform: rotateY(-90deg) rotateZ(90deg);}
50% {-moz-transform: rotateY(270deg) rotateZ(270deg);}
66% {-moz-transform: rotateY(90deg) rotateX(90deg);}
83% {-moz-transform: rotateX(180deg);}
}
body>div>div {
-webkit-animation-delay:2s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
-moz-animation-delay:2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 6s;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 50% 50%;
}
body>div>div { -webkit-animation-name: spindice;-moz-animation-name: spindice; }
body>div>div div:nth-child(1){
background: radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 130px 130px / 40px 40px red ;
}
body>div>div div:nth-child(3) {
background: radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 20px 240px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 240px 20px / 40px 40px red;
}
body>div>div div:nth-child(5) {
background: radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 20px 240px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 240px 20px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 130px 130px / 40px 40px red;
}
body>div>div div:nth-child(6){
background: radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 20px 20px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 240px 20px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 20px 240px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 240px 240px / 40px 40px red;
}
body>div>div div:nth-child(4) {
background: radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 20px 20px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 240px 20px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 20px 240px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 240px 240px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 130px 130px / 40px 40px red;
}
body>div>div div:nth-child(2) {
background: radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 20px 20px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 240px 20px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 20px 240px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 240px 240px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 20px 130px / 40px 40px,
radial-gradient(20px circle at 50% 50% , white, white, red) no-repeat 240px 130px / 40px 40px red;
}
.test{font-size:24px;color:#fff}
/* pause animation*/
div:hover * {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
animation-play-state:paused;
}
h1{position:absolute;top:0;}
</style>
</head>
<body>
<h1>Hover to pause (Firefox and webkit only)</h1>
<div>
<div>
<div><a class="test" href="http://www.google.com">test</a></div>
<div><a class="test" href="http://www.google.com">test</a></div>
<div><a class="test" href="http://www.google.com">test</a></div>
<div><a class="test" href="http://www.google.com">test</a></div>
<div><a class="test" href="http://www.google.com">test</a></div>
<div><a class="test" href="http://www.google.com">test</a></div>
</div>
</div>
</body>
</html>
Fiddle link in original post
In Firefox and Chrome, the fiddle page looks like 3 wide boxes containing one word links that are clickable. That’s a lot of code just to produce 3 rectangles.
It might be better if you followed Paul’s example and created a stand-alone demo page with all of the code from <!doctype> to </html>.
Interesting that this works in Firefox. Stupid me for taking Chrome as ‘scripture’…*BUT goes to show that this is a webkit thing (even though Chrome isn’t exactly webkit anymore).
It’s more than just 3 boxes, click the links below…*it spins, in Chrome the other ‘panels’ aren’t clickable, but ARE in Firefox.
I’m not sure I see how posting a complete page into the thread is handier than JSFiddle?
Ok, I must have missed that
It seems to work in Firefox but not in webkit.
If you remove the backface:visibility for these two rules then webkit works but I don;t know if that will affect the display.
/* line 21, /Users/chris2/ruby/backbone/app/assets/stylesheets/dashboard/scheme_widget.css.scss */
.widget.scheme .container.show_right {
-webkit-transform: rotateY(-90deg) translateX(-100%);
-webkit-transform-origin:center left;
-moz-transform: rotateY(-90deg) translateX(-100%);
-moz-transform-origin: center left;
-ms-transform: rotateY(-90deg) translateX(-100%);
-ms-transform-origin: center left;
-o-transform: rotateY(-90deg) translateX(-100%);
-o-transform-origin: center left;
transform: rotateY(-90deg) translateX(-100%);
transform-origin: center left;
}
/* line 41, /Users/chris2/ruby/backbone/app/assets/stylesheets/dashboard/scheme_widget.css.scss */
.widget.scheme .container.show_left {
-webkit-transform: rotateY(90deg) translateX(100%);
-webkit-transform-origin: center right;
-moz-transform: rotateY(90deg) translateX(100%);
-moz-transform-origin: center right;
-ms-transform: rotateY(90deg) translateX(100%);
-ms-transform-origin: center right;
-o-transform: rotateY(90deg) translateX(100%);
-o-transform-origin: center right;
transform: rotateY(90deg) translateX(100%);
transform-origin: center right;
}
It doesn’t affect it in your example but I guess that may be a cut down version.
I think Ron missed the fact that he needed to click those links at the bottom to see the effect
Interesting…*thank you for the help! That fixed it.
That backface visibility was being included from a sass mixin. I think I understand what was happening though, visibility was set to off…*but was still showing. Neither engine was correct, but was webkit the ‘closest’ to being right by not allowing interaction, correct?
I think it was more like a bug than a behaviour but it’s anyone’s guess.
Yep, blinders; I missed the buttons. Thanks for the note, Paul.
The animation is very slick. (I would not have remembered about backface-visibility.)