Specifically the perspective and transform properties are not working in css code provided below. Also, the radio buttons work but they do not link to the correct side of the cube. I can't spot the problem.
$size: 500px; // cube length
body {
text-align: center;
padding: 50px;
}
.scene {
display: inline-block;
margin-top: 50px;
width: 500px;
height: 500px;
-webkit-perspective: 600px;
}
.cube3d {
display: inline-block;
position: 500px;
width: 500px;
height: 500px;
-webkit-transform-style: preserve-3d;
-webkit-transition: transform 0.6s;
}
.cube-face {
width: 500px;
height: 500px;
position: absolute;
background: red;
opacity: 0.8;
}
// faces
.cube-face-front {
background: yellow;
transform: translate3d(0, 0, $size/2);
}
.cube-face-back {
background: black;
transform: rotateY(180deg) translate3d(0, 0, $size/2);
}
.cube-face-left {
background: green;
transform: rotateY(-90deg) translate3d(0, 0, $size/2);
}
.cube-face-right {
background: magenta;
transform: rotateY(90deg) translate3d(0, 0, $size/2);
}
.cube-face-top {
background: blue;
transform: rotateX(90deg) translate3d(0, 0, $size/2);
}
.cube-face-bottom {
background: red;
transform: rotateX(-90deg) translate3d(0, 0, $size/2);
}
// controls
#radio-back:checked ~ .scene .cube {
transform: rotateY(180deg);
}
#radio-left:checked ~ .scene .cube {
transform: rotateY(90deg);
}
#radio-right:checked ~ .scene .cube {
transform: rotateY(-90deg);
}
#radio-top:checked ~ .scene .cube {
transform: rotateX(-90deg);
}
#radio-bottom:checked ~ .scene .cube {
transform: rotateX(90deg);
}
Related
scale3d(sx, sy, sz)
I can't understand what scale3d() really do when I change (sz) Value
In this below code you can see the value of (sz) is = 1
body{perspective:600px}
div{
width: 300px;
height: 300px;
background-color: burlywood;
margin: auto;
border-radius:40px;
transition: all 5s ease-in-out;
transform: scale3d(1,1,1)
}
<div></div>
In this below code you can see the value of (sz) is = 0.5
but nothing changed the same result
body{perspective:600px}
div{
width: 300px;
height: 300px;
background-color: burlywood;
margin: auto;
border-radius:40px;
transition: all 5s ease-in-out;
transform: scale3d(1,1,0.5)
}
<div></div>
Note : I tried all solutions & values but nothing happened
The third number in scale3d is for the z-axis, which is only applicable to three-dimensional shapes.
Your examples have perspective, but they're still just use two-dimensional shapes, so nothing happens.
You can see the effect with a true cube:
scale3d(1,1,1)
#wrapper {
perspective: 1200px;
width: 200px;
height: 200px;
margin: 80px auto;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) scale3d(1, 1,1);
transition: transform 1s;
}
#cube>div {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
#cube>div span {
margin: auto;
font-size: 50px;
}
#left {
background-color: rgba(25, 25, 112, 0.7);
transform: rotateY(-90deg) translateZ(100px);
}
#right {
background-color: rgba(47, 79, 79, 0.7);
transform: rotateY(90deg) translateZ(100px);
}
#front {
background-color: rgba(119, 136, 153, 0.7);
transform: rotateY(0deg) translateZ(100px);
}
#back {
background-color: rgba(72, 61, 139, 0.7);
transform: rotateX(180deg) translateZ(100px);
}
#top {
background-color: rgba(0, 128, 128, 0.7);
transform: rotateX(90deg) translateZ(100px);
}
#bottom {
background-color: rgba(70, 130, 180, 0.7);
transform: rotateX(-90deg) translateZ(100px);
}
<div id="wrapper">
<div id="cube">
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="front"><span>front</span></div>
<div id="back"><span>back</span></div>
<div id="top"><span>top</span></div>
<div id="bottom"><span>bottom</span></div>
</div>
</div>
scale3d(1,1,0.5)
#wrapper {
perspective: 1200px;
width: 200px;
height: 200px;
margin: 50px auto;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) scale3d(1,1,0.5);
transition: transform 1s;
}
#cube > div {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
#cube > div span {
margin: auto;
font-size: 50px;
}
#left {
background-color: rgba(25,25,112,0.7);
transform: rotateY(-90deg) translateZ(100px);
}
#right {
background-color: rgba(47,79,79,0.7);
transform: rotateY(90deg) translateZ(100px);
}
#front {
background-color: rgba(119,136,153,0.7);
transform: rotateY(0deg) translateZ(100px);
}
#back {
background-color: rgba(72,61,139,0.7);
transform: rotateX(180deg) translateZ(100px);
}
#top {
background-color: rgba(0,128,128,0.7);
transform: rotateX(90deg) translateZ(100px);
}
#bottom {
background-color: rgba(70,130,180,0.7);
transform: rotateX(-90deg) translateZ(100px);
}
<div id="wrapper">
<div id="cube">
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="front"><span>front</span></div>
<div id="back"><span>back</span></div>
<div id="top"><span>top</span></div>
<div id="bottom"><span>bottom</span></div>
</div>
</div>
What is Scale3d?
(Sample at end, see link)
Your 1st code:
transform: scale3d(1,1,1)
Your 2nd code:
transform: scale3d(1,1,0.5)
This is:
scale3d ( <scaling-value-x> , <scaling-value-y> , <scaling-value-z> )
Your example is a 2d shape with no effect thats why. Z pane is used to make 3d objects.
Try Here and see how it works.
I have the following HTML and CSS code to draw the top of a cube. So it moves down and I want it to animate as if it is opening up. I am unable to figure out how to transform the top so that it appears to open up.
I have included the entire code for the cube. With respect to this, I want the top to open up.
.pers500 {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
-webkit-perspective-origin: 150% 150%;
-webkit-transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
-webkit-transform: translateZ(50px) translateX(171px) translateY(222px);
-moz-transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.4em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px);
-webkit-transform: skewY(40deg) translateZ(50px) translateY(65px) translateX(-20px);
-moz-transform: skewY(40deg) translateZ(50px) translateY(62px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.7em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
-webkit-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
-moz-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
/*0% {transform:rotateX(30deg);}
50% {transform:rotateX(30deg);}
100% {transform:rotateX(30deg);} commented code here doesn't work*/
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
To make the cube open up, you first need to set the transform-origin property (as mentioned in the other answer) to top. This setting would make the top side of the .face.top remain fixed when the rotation is being performed. Then you need to add the rotation using rotateX(). This would rotate the top face to produce the opening effect. Note that the transform property should contain the entire list of transforms for it to open correctly. You cannot just add the rotateX() alone within the animation.
.pers500 {
perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
border: 1px solid brown; /* just for testing */
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.43em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px) translateY(64px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.69em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
transform-origin: top;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
0% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
}
100% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(200deg);
}
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
Note:
Setting a transform-origin will affect the position of the top face in the demo and so the values that you've used for translateX() and translateY() on the top face need to be modified a bit like in the above demo.
The vendor prefixed versions of properties should always be added before the standard property in order to be future proof.
I have removed the vendor prefixed versions in the above snippet just to keep it simple.
Set the transform origin to tbe edge of the cube with
transform-origin: 0 50% 0;
Then rotate it around the z axis:
transform: rotateZ(90deg);
I hope this works for you, I didn't have the chance to test it.
There are already some nice posts on animating 3d objects in css. However I wondered whether it is possible to do so from the perspective of being inside the object.
This would be nice to build, for example, a pure css game or street view like application.
After some tweaking with the help of David DeSandro, this css did the trick.
#container {
top: 100px;
width: 1200px;
height: 600px;
position: relative;
perspective: 600px;
/* half the width */
border: 2px solid green;
}
#room {
width: 100%;
height: 100%;
position: absolute;
transform-origin: 50% 80% 600px;
transform-style: preserve-3d;
}
#room figure {
margin: 0;
display: block;
position: absolute;
border: 2px solid green;
font: 400px"calibri";
text-align: center;
}
#room .n,
.e,
.s,
.w {
width: 1196px;
height: 596px;
}
#room .n {
background-color: rgba(255, 0, 0, 0.3);
}
#room .e {
background-color: rgba(255, 255, 0, 0.3);
}
#room .s {
background-color: rgba(0, 255, 255, 0.3);
}
#room .w {
background-color: rgba(0, 0, 255, 0.3);
}
#room .t,
.b {
width: 1196px;
height: 1196px;
top: -300px;
background-color: rgba(200, 200, 200, 0.5);
}
/* transform & inverse */
#room .n {
transform: rotateY(0deg) translateZ(0px);
}
#room .e {
transform: rotateY(-90deg) translateZ(-600px) translateX(600px);
}
#room .s {
transform: rotateY(180deg) translateZ(-1200px);
}
#room .w {
transform: rotateY(90deg) translateZ(-600px) translateX(-600px);
}
#room .t {
transform: rotateX(90deg) translateZ(300px) translateY(600px);
}
#room .b {
transform: rotateX(90deg) translateZ(-300px) translateY(600px);
}
#room .show-n {
transform: translateZ(0px) rotateY(0deg);
}
#room .show-e {
transform: translateX(-600px) translateZ(600px) rotateY(90deg);
}
#room .show-s {
transform: translateZ(1200px) rotateY(180deg);
}
#room .show-w {
transform: translateX(600px) translateZ(600px) rotateY(-90deg);
}
#room .show-t {
transform: translateY(-600px) translateZ(-300px) rotateX(-90deg);
}
#room .show-b {
transform: translateY(-600px) translateZ(300px) rotateX(90deg);
}
#room {
animation: 5s hspinner;
}
#keyframes hspinner {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
<section id="container">
<div id="room">
<figure class="n">N</figure>
<figure class="e">O</figure>
<figure class="s">Z</figure>
<figure class="w">W</figure>
<figure class="t">T</figure>
<figure class="b">B</figure>
</div>
</section>
Enjoy.
I have this cube that I rotate it so I would look trough it's diagonal. How could I rotate this cube around this particular diagonal? I tried different rotations but nothing seems to fit me.
I am looking for CSS only solution/explenation.
.container {
width: 200px;
height: 200px;
position: absolute;
perspective: 10000px;
left: 50vw;
top: 50vh;
transform: translateX(-50%) translateY(-50%);
}
.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.cube figure {
margin: 0;
width: 100%;
height: 100%;
display: block;
position: absolute;
border: 2px solid black;
box-sizing: border-box;
}
.cube .front {
transform: rotateY(0deg) translateZ(100px);
}
.cube .back {
transform: rotateX(180deg) translateZ(100px);
}
.cube .right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(100px);
}
.cube {
transform: rotateY(35deg) rotateX(45deg);
}
.cube:hover {
transition: all 1s;
transform: rotateY(35deg) rotateX(45deg);
}
<section class="container">
<div class="cube">
<figure class="front"></figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
</div>
</section>
Found it - this solved my problem (hover over cube).
Explanation: the transform stack is evaluated from right to left. So, if we want to rotate an element that is transformed around the z axis, we need to set this transform the first one.
If the original is
transform: translateX(-50%) translateY(-50%);
then
transform: rotateZ(value) translateX(-50%) translateY(-50%);
will rotate the element around the viewer z axis (the desired effect)
transform: translateX(-50%) translateY(-50%) rotateZ(value);
would rotate the element around its Z axis
.container {
width: 200px;
height: 200px;
position: absolute;
perspective: 10000px;
left: 50vw;
top: 50vh;
transform: translateX(-50%) translateY(-50%);
}
.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.cube figure {
margin: 0;
width: 100%;
height: 100%;
display: block;
position: absolute;
border: 2px solid black;
box-sizing: border-box;
}
.cube .front { transform: rotateY( 0deg ) translateZ( 100px ); }
.cube .back { transform: rotateX( 180deg ) translateZ( 100px ); }
.cube .right { transform: rotateY( 90deg ) translateZ( 100px ); }
.cube .left { transform: rotateY( -90deg ) translateZ( 100px ); }
.cube .top { transform: rotateX( 90deg ) translateZ( 100px ); }
.cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }
.cube {
transform: rotateY(35deg) rotateX(45deg);
}
.cube:hover {
transition: all 1s;
transform:rotateZ(60deg) rotateY(35deg) rotateX(45deg);
}
<section class="container">
<div class="cube">
<figure class="front"></figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
</div>
</section>
I'm trying to make a menu with css3 rotations. Here is an example.
http://jsfiddle.net/5Bg7P/
When a person hovers the square rotates 90 degrees around the x-axis, then when a user clicks it, it rotates an additional 5 degrees to 95 degrees. In chrome, sometimes after it rotates, and i click on it, it goes back to 0 degrees as if the mouse left the item even though it didn't. It happens more often if you let the menu item finish spinning and then only click on it.
Any advice would be appreciated.
#menu .menuItem {
position: relative;
float: left;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, -50px);
transform: translate3d(0, 0, -50px);
-webkit-transition: .5s;
transition: .5s;
width: 120px;
height: 50px;
opacity: .6;
cursor: pointer;
}
#menu .menuItem:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
margin-top: 1px;
}
#menu .menuItem:active {
-webkit-transform: rotateX(95deg);
transform: rotateX(95deg);
margin-top: 1px;
}
#menu .menuItem div {
position: absolute;
width: 120px;
height: 50px;
border: 1px solid #f2f2f2;
background: #848488;
}
#menu .menuItem .front,
#menu .menuItem .bottom {
text-align: center;
height: 50px;
line-height: 50px;
color: #f2f2f2;
letter-spacing: 1px;
font-size: 18px;
}
#menu .menuItem .front {
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
#menu .menuItem .back {
-webkit-transform: translate3d(0, 0, -25px);
transform: translate3d(0, 0, -25px);
/* box-shadow: 0px 0px 40px 7px #b9c9d0; */
}
#menu .menuItem .top {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 25px);
transform: rotateX(90deg) translate3d(0, 0, 25px);
}
#menu .menuItem .bottom {
-webkit-transform: rotateX(-90deg) translate3d(0, 0, 25px);
transform: rotateX(-90deg) translate3d(0, 0, 25px);
}
#menu .menuItem .right {
-webkit-transform: rotateY(90deg) translate3d(0, 0, 50px);
transform: rotateY(90deg) translate3d(0, 0, 50px);
height: 50px;
width: 50px;
left: 25px;
}
#menu .menuItem .left {
-webkit-transform: rotateY(-90deg) translate3d(0, 0, 50px);
transform: rotateY(-90deg) translate3d(0, 0, 50px);
height: 50px;
width: 50px;
left: 25px;
}
I think that's a problem about the hover state being activated in the base element or the child element.
I have changed a little bit how the hover and the transforms work, and now it works ok (or at least it works ok in my tests)
CSS
#menu {
position: relative;
z-index: 1;
float: left;
font-family: helvetica;
}
#menu .menuItem {
position: relative;
float: left;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .5s;
transition: .5s;
width: 120px;
height: 50px;
opacity: .6;
cursor: pointer;
}
#menu .menuItem:active {
-webkit-transform: rotateX(5deg);
transform: rotateX(5deg);
margin-top: 1px;
}
#menu .menuItem div {
position: absolute;
width: 120px;
height: 50px;
border: 1px solid #f2f2f2;
background: #848488;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
font-size: 18px;
margin-top: 1px;
transition: .5s;
}
#menu .menuItem .front {
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
#menu .menuItem .bottom {
-webkit-transform: rotateX(-90deg) translate3d(0, 0, 25px);
transform: rotateX(-90deg) translate3d(0, 0, 25px);
}
#menu .menuItem:hover .front {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 25px);
transform: rotateX(90deg) translate3d(0, 0, 25px);
}
#menu .menuItem:hover .bottom {
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
fiddle
updated fiddle
The transtion between
transform: rotateX(90deg) translate3d(0, 0, 25px);
and
transform: translate3d(0, 0, 25px);
is not a perfect rotation, but the interpolation between the 2 movements.
To get a pure rotation, the other state must have matching properties:
transform: rotateX(0deg) translate3d(0, 0, 25px);