CSS rotation slow
15,569
You specified the speed already:
-webkit-transition: -webkit-transform 1s ease-in;
^^
Change it to something like 0.3s
: http://jsfiddle.net/egEq2/1/
Comments
-
eozzy about 2 years
.badge { -webkit-transform-style: preserve-3d; -webkit-perspective: 1000; position: relative; } .back, .front { position: absolute; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in; width: 100%; height: 100%; } .back { -webkit-transform: rotateY(180deg); overflow: hidden; } .front { } .product-action { display: inline-block; } .product-action:hover .back { -webkit-transform: rotateY(0deg); } .product-action:hover .front { -webkit-transform: rotateY(-180deg); }
... works, but flips too slow, can I change the speed?
Also, can I add width somehow so the flip looks like a board and not a thin paper? :)
Thanks!
-
eozzy almost 12 yearsAh great, got it. Also, is there any way to make it look 3d while flipping?
-
Blender almost 12 yearsYou could give the card a background color or border. Without that, it won't look like it's rotating: jsfiddle.net/egEq2/2