I'm developing a flip animation to show new numbers; it's much like an analog clock or calendar with the hinge in the middle.
The approach is straight forward: have a div with:
The bottom half of the first number on one side
The top half of the second number rotated 180 degrees so it's on the back
In order to show the new number, I rotate that whole div around the center of the container, revealing the back of the rotating div:
Number flip animation in latest Firefox
However, in Chrome, the animation doesn't always work. Sometimes half disappears completely until the transition animation is complete and sometimes the old number doesn't render: Number flip animation in latest Chrome with the bottom of the number not appearing till after animation is complete
In Safari 12, it's worse, it doesn't seem to respect backface-visibility, even with the -webkit- prefix:
Safari 12 Number animation, the bottom half of the first number is inverted after animation is complete
Pre-Chromium Edge handles this fine, but new (checked in v83) Edge has the same issue as Chrome.
I've tried messing around with the properties and have looked through other backface-visibility questions here.
Here's the code, hover over the numbers to see the flip:
body {
background: #2e517d;
}
.container {
width: 175px;
height: 192px;
background: #4e9bfa;
position: relative;
left: 50%;
transform: translate(-50%, 50%);
perspective: 1000px;
}
.cover {
width: 175px;
height: 50%;
position: absolute;
top: 96px;
background-color: #34b58c;
transform: rotateX(0deg);
transform-style: preserve-3d;
transform-origin: top;
transition: all 0.5s ease-out;
}
.container:hover .cover {
transform: rotateX(180deg);
}
.flip {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.container p {
font-size: 1000%;
margin: 0;
}
.container>p {
height: 96px;
overflow: hidden;
}
.front-number-bottom {
position: relative;
height: 96px;
overflow: hidden;
background-color: red;
}
.front-number-bottom p {
margin: 0;
position: relative;
top: -96px;
}
.back-number-top {
position: relative;
height: 96px;
overflow: hidden;
}
.back-number-bottom {
height: 96px;
overflow: hidden;
position: relative;
z-index: -1;
}
.back-number-bottom p {
margin: 0;
position: relative;
top: -96px;
}
div.front {
background: red;
}
div.back {
background: green;
transform: rotateX(180deg);
}
<body>
<div class="container">
<p>76</p>
<div id="cover" class="cover">
<div class="flip front">
<div class="front-number-bottom">
<p>76</p>
</div>
</div>
<div class="flip back">
<div class="back-number-top">
<p>77</p>
</div>
</div>
</div>
<div class="back-number-bottom">
<p>77</p>
</div>
</div>
</div>
</body>
Is this a sound approach that can be easily fixed in Chromium browsers and Safari?
Would a different approach be better?
I guess your code is a bit complex. I would simplify your logic like below where you no more need backface-visibility: hidden;
Note the usage of two important things:
the mask that allow me to cut the element and show only 50% of the height (top or bottom). This will make the animation more realistic since each number will have both top and bottom part seperated.
the z-index trick where I apply a transtion that change the z-index exactly at the middle of the animation (when the rotations are at 90deg)1.
.card {
width: 175px;
height: 192px;
position: relative;
z-index:0;
left: 50%;
transform: translate(-50%, 50%);
font-size: 160px;
}
.card span,
.card span::before,
.card span::after {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.card span {
position:absolute;
z-index:2;
perspective: 1000px;
}
.card span:first-child {
z-index:3;
transition:0s 0.25s all linear;
}
.card span::before,
.card span::after{
content:attr(data-number);
-webkit-mask:linear-gradient(#fff,#fff) top/100% 50% no-repeat;
mask:linear-gradient(#fff,#fff) top/100% 50% no-repeat;
background:red;
transition:0.5s all linear;
transform-style: preserve-3d;
}
.card span::after {
-webkit-mask-position:bottom;
mask-position:bottom;
background:green;
}
.card span:first-child::after {
transform: rotateX(0deg);
}
.card span:last-child::before {
transform: rotateX(-180deg);
}
/* Hover */
.card:hover span:first-child {
z-index:1;
}
.card:hover span:first-child::after {
transform: rotateX(180deg);
}
.card:hover span:last-child::before {
transform: rotateX(0deg);
}
<div class="card">
<span data-number="76"></span>
<span data-number="77"></span>
</div>
The mask can be replaced with clip-path too:
.card {
width: 175px;
height: 192px;
position: relative;
z-index:0;
left: 50%;
transform: translate(-50%, 50%);
font-size: 160px;
}
.card span,
.card span::before,
.card span::after {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.card span {
z-index:2;
perspective: 1000px;
}
.card span:first-child {
z-index:3;
transition:0s 0.25s all linear;
}
.card span::before,
.card span::after{
content:attr(data-number);
clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
background:red;
transition:0.5s all linear;
transform-style: preserve-3d;
}
.card span::after {
clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);
background:green;
}
.card span:first-child::after {
transform: rotateX(0deg);
}
.card span:last-child::before {
transform: rotateX(-180deg);
}
/* Hover */
.card:hover span:first-child {
z-index:1;
}
.card:hover span:first-child::after {
transform: rotateX(180deg);
}
.card:hover span:last-child::before {
transform: rotateX(0deg);
}
<div class="card">
<span data-number="76"></span>
<span data-number="77"></span>
</div>
Another optimization using counter and without setting an explicit width/height
.card {
margin:0 5px;
font-family:monospace;
display:inline-block;
text-align:center;
position: relative;
z-index:0;
font-size: 150px;
counter-reset:num calc(var(--n,1) - 1);
}
/* this will defined the height/width*/
.card::after {
content:counter(num);
visibility:hidden;
}
/**/
.card span,
.card span::before,
.card span::after {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.card span {
z-index:2;
perspective: 1000px;
counter-increment:num;
}
.card span:first-child {
z-index:3;
transition:0s 0.25s all linear;
}
.card span::before,
.card span::after{
content:counter(num);
clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
background:red;
transition:0.5s all linear;
transform-style: preserve-3d;
}
.card span::after {
clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);
background:green;
}
.card span:first-child::after,
.card:hover span:last-child::before{
transform: rotateX(0deg);
}
.card span:last-child::before {
transform: rotateX(-180deg);
}
.card:hover span:first-child::after {
transform: rotateX(180deg);
}
.card:hover span:first-child {
z-index:1;
}
<div class="card" style="--n:75">
<span></span><span></span>
</div>
<div class="card" style="--n:5">
<span></span><span></span>
</div>
<div class="card" style="--n:100">
<span></span><span></span>
</div>
1 When using linear it's pretty easy but it's more trick with other ease functions. Here is a related question that can help you identify the middfle of ease functions: When exactly does an ease animation reach its midpoint?
Related
I have created a 3d cube using CSS, now i want to rotate that cube on my HTML page. My problem is the when the cube rotates, it also moves to the sides, i need it to stay in place and rotate.
i've tried changing the posistion of my div to relative, which scattered the cube sides and still made it rotate to the sides.
I believe the problem has something to do with the transform-origin, however no matter how i change the values it doesn't help.
.spinner div {
position: absolute;
display: inline-block;
width: 300px;
height: 300px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 100px;
}
.spinner .face1 {
transform: translateZ(150px);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg) translateZ(150px);
background-color: rgb(184, 187, 31);
}
.spinner .face3 {
transform: rotateY(180deg) translateZ(150px);
background-color: green;
}
.spinner .face4 {
transform: rotateY(-90deg) translateZ(150px);
background-color: red;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
transform-origin: 50% 0;
}
.center-screen {
display: flex;
flex-direction: column;
justify-content: top;
align-items: top;
text-align: center;
margin-top: 10%;
margin-left: 40%;
}
#keyframes spincube {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg)
}
}
<body>
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
</body>
as described i expected the cube to stay in place but it slides out to the side.
I would re adjust the transformation like below to make sure the slides are around the center of the main element which is an empty element.
Note the use of translateX to achieve the needed effect.
.spinner div {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 80px;
}
.spinner .face1 {
transform: translateZ(50px) translateX(-50%);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg);
background-color: rgb(184, 187, 31);
}
.spinner .face3 {
transform: translateZ(-50px) translateX(-50%) rotateY(180deg) ;
background-color: green;
}
.spinner .face4 {
transform: translateX(-100%) rotateY(-90deg);
background-color: red;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
display: inline-block; /* This is important !!*/
outline: 5px solid red; /* to illustrate */
}
.center-screen {
text-align: center;
margin-top: 10%;
}
#keyframes spincube {
to {
transform: rotateY(-360deg)
}
}
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
You can also rely on left to handle this:
.spinner div {
position: absolute;
width: 100px;
left:-50px;
height: 100px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 80px;
}
.spinner .face1 {
transform: translateZ(50px);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg);
background-color: rgb(184, 187, 31);
left:0;
}
.spinner .face3 {
transform: translateZ(-50px) rotateY(180deg) ;
background-color: green;
}
.spinner .face4 {
transform:rotateY(-90deg);
background-color: red;
left:-100px;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
display: inline-block; /* This is important !!*/
outline: 5px solid red; /* to illustrate */
position:relative;
}
.center-screen {
text-align: center;
margin-top: 10%;
}
#keyframes spincube {
to {
transform: rotateY(-360deg)
}
}
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
You could do something like this:
Credits: https://codepen.io/bcgwebdesign/pen/gRXxxR?editors=0100
Tip: There are a lot of demos of this kind on Codepen
/* keyframes for rotating animation */
#-webkit-keyframes spinX {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
#-webkit-keyframes spinBoth {
from { transform: rotateY(0) rotateX(0); }
to { transform: rotateY(360deg) rotateX(0deg) ; }
}
#-webkit-keyframes spinY {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }
}
#-webkit-keyframes recolor {
0% { background: rgba(0,255,0,0.1); }
33% { background: rgba(255,0,0,0.1); }
66% { background: rgba(0,0,255,0.1); }
}
/* scene wrapper */
.wrapper{
height: 300px;
margin-top:0;
position:relative;
perspective: 1000px;
perspective-origin: 50% -50px;
}
/* cube wrapper */
.cube {
position: relative;
margin: 200px auto;
width: 200px;
transform-style: preserve-3d;
animation: spinBoth 5s infinite ease-in-out;
transition: all 1s linear;
}
/* outer cube */
b {
position:absolute;
width:200px;
height:200px;
display:block;
background:rgba(255,0,0,0.1);
box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
font-size:20px;
text-align:center;
line-height:200px;
color:rgba(0,0,0,0.5);
font-family:sans-serif;
text-transform:uppercase;
transition: all 1s linear;
}
b.back{
transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
}
b.right{
transform:translateY(-100px) rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
b.left{
transform:translateY(-100px)rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
b.top{
transform:rotateX(-90deg) translateY(-100px) translateZ(-100px);
transform-origin: top center;
}
b.bottom{
transform:rotateX(90deg) translateY(100px) translateZ(100px);
transform-origin: bottom center;
}
b.front{
transform: translateZ(100px) translateY(-100px);
}
<div class="wrapper">
<div class="cube">
<b class="front">front</b>
<b class="back">back</b>
<b class="top">top</b>
<b class="bottom">bottom</b>
<b class="left">left</b>
<b class="right">right</b>
</div>
</div>
I try to do an animated box that will unfold itself on the page load.
I have a panel lifted up. I try to rotate it 90deg to the ground, and after, I would want to lift it up again based on the other edge 90deg.
I tried to change the origin (transform-origin: top) but it change the origin to the original origin. I had to add 2 translation to position it at the right place but it create a bump. The edge on the ground don't stick on the ground.
Here's my current fiddle: https://jsfiddle.net/hbnta1uj/2/
I also tried without modifying the origin but I still get a bump:
#keyframes slideFront2 {
0% {
transform: rotateX(-0deg);
}
50% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(-180deg) translateZ(-100px) translateY(100px);
}
}
I have another idea where I position the second panel flat already and I hide it (opacity 0) and at 50% when the first panel is flat I show the second and just 90deg it.
But I would want to know for more complex animations if there's a way to do it the way I describe it, by always start at the new position the new transformation?
Thanks
I would consider an animation on the container to make it easier where you only need one keyframe:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
width: 90%;
margin: auto;
height: 100vh;
background-color: rgb(194, 194, 194);
}
.progressbar-wrapper {
width: 300px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 150px);
position: absolute;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-30deg);
}
.progressbar {
width: 100%;
height: 100%;
transform-origin: bottom;
animation: 0.5s ease-out 1 slideFront forwards;
transform-style: preserve-3d;
}
.side {
width: 100%;
height: 100%;
background-color: rgba(254, 254, 254, 0.3);
position: absolute;
top: 0;
left: 0;
}
#keyframes slideFront {
100% {
transform: rotateX(-90deg);
}
}
.bottom {
box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
}
.back {
animation: 1s ease-out 0.5s 1 slideFront forwards;
transform-origin: top;
}
<div class="container">
<div class="progressbar-wrapper">
<div class="progressbar">
<div class="side back">
</div>
<div class="side bottom">
</div>
</div>
</div>
</div>
The thing I discover is that the order matter in the translate function. Everything is executed left to right so the origin of the rotation will be relative to the current position of the element if you execute everything left to right (Here's 2 boxes getting the same rotation translation but the order differ: https://codepen.io/anon/pen/oOQGPp)
So in my example, if you do:
50.001% {
transform: rotateX(90deg) translateZ(00px) translatey(100px) ;
transition-timing-function: linear;
}
100% {
transform: rotateX(0deg) translateZ(100px) translatey(00px) ;
transition-timing-function: linear;
}
The rotation will be applied before the translation so the rotation origin will not be the bottom line after the translation but it will be the position without the origin based on the translated part (So it will be the 0% position origin.) CSS will fail to make the path of the animation and it will add a little bump.
But if you do transform: TRANSLATE ROTATE, the rotation will be applied after the translation so the origin of the rotation will be related to the position with the translation. This is how I was able to rotate the item without getting the little bump bug.
Here's the full fixed css. You can run it in my original jsfiddle to see the result
* {
box-sizing: inherit;
margin: 0;
}
html {
box-sizing: border-box;
}
.container {
width: 90%;
margin: auto;
height: 100vh;
background-color: rgb(194, 194, 194);
}
.progressbar-wrapper {
width: 300px;
height: 100px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.progressbar {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-30deg);
}
.side {
width: 100%;
height: 100%;
background-color: rgba(254, 254, 254, 0.3);
position: absolute;
top: 0;
left: 0;
}
#keyframes slideBottom {
0% {
transform: rotateX(-0deg);
}
100% {
transform: rotateX(-90deg);
}
}
#keyframes slideFront {
0% {
transform: rotateX(-0deg);
}
50% {
transform: rotateX(-90deg);
}
50.001% {
transform: translateZ(100px) rotateX(90deg);
transition-timing-function: linear;
}
100% {
transform: translateZ(100px) rotateX(0deg) ;
transition-timing-function: linear;
}
}
.bottom {
animation: 0.5s ease-out 0s 1 slideBottom forwards;
box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
transform-origin: bottom;
}
.back {
animation: 1s ease-out 0s 1 slideFront forwards;
transform-origin: bottom;
}
I'm trying to make it so that the rotate(-45deg) property gets delayed a shortly after the first property translateY(6px) with the help of a delay. But how do I do that?
Code:
transform: translateY(6px) rotate(-45deg);
I first thought it was something like:
transform: translateY(6px) rotate(-45deg, 2s);
There is no trivial way to do this but in your particular case you can split the transformation using two different properties. You keep the rotation within transform and you use top/bottom to add the translation.
.box {
margin: 20px;
position: relative;
width: 200px;
height: 200px;
background: red;
top: 0;
transition: transform 0.5s, top 0.5s 0.5s;
}
.box:hover {
transform: rotate(-45deg);
top: -50px;
}
<div class="box">
</div>
Or you can consider animation:
.box {
margin: 20px;
position: relative;
width: 200px;
height: 200px;
background: red;
top: 0;
}
.box:hover {
animation:change 1s linear forwards
}
#keyframes change {
50% {
transform: rotate(-45deg);
}
100% {
transform: translateY(-50px) rotate(-45deg);
}
}
<div class="box">
</div>
I have this and I want to make a cube with HTML & CSS only like in the above image. My best try:
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
float:left;
transform: skew(180deg,210deg);
position: absolute;
top: 43px;
}
.square2{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
float:left;
transform: skew(180deg,150deg);
position: absolute;
left:102px;
top: 43px;
}
.square3{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
float:left;
transform: skew(180deg,180deg);
position: absolute;
left: 51px;
top: -61px;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
According to your HTML, I get this JSFiddle. I just played with transform.
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: skew(180deg,210deg);
position: absolute;
top: 43px;
}
.square2{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: skew(180deg,150deg);
position: absolute;
left:102px;
top: 43px;
}
.square3{
width:114px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: 0px;
top: -32px;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
Updated CSS
.square3{
width:114px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: 0px;
top: -32px;
}
I changed transform CSS with this.
Extra: David Walsh has a cool animated version on an cube. Apart from the fact that it looks kinda cool, by fiddling with the settings you can learn quite a lot about it.
You can also achieve a cube with 3d transforms. This will give your cube a more realistic perspective. As if the cube was a real 3d shape like this:
In the following I used one div with 2 pseudo elements :
body {
perspective: 900px;
padding-bottom:50%;
}
div {
position: relative;
width: 20%;
padding-bottom: 20%;
margin: 0 auto;
transform-style: preserve-3d;
background: #C52329;
transform: rotateX(60deg) rotatez(45deg);
}
div:before, div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform-origin: -2% -2%;
background: inherit;
}
div:before {
top: 104%; left: 0;
transform: rotateX(-90deg);
}
div:after {
top: 0; left: 104%;
transform: rotateY(90deg);
}
<div></div>
CSS 3d cube with 6 faces:
This technique allows you to make a "real cube" with 6 faces:
body{
perspective-origin:50% -100%;
perspective: 900px;
overflow:hidden;
}
h1{position:absolute;font-family:sans-serif;}
.cube {
position:relative;
padding-bottom:20%;
transform-style: preserve-3d;
transform-origin: 50% 100%;
transform:rotateY(45deg) rotateX(0);
transition:transform 3s;
}
.cubeFace {
position: absolute;
left:40%;top:0;
width: 20%;height:100%;
margin: 0 auto;
transform-style: inherit;
background: #C52329;
box-shadow:inset 0 0 0 5px #fff;
transform-origin:50% 50%;
transform: rotateX(90deg);
backface-visibility:hidden;
}
.face2{
transform-origin:50% 50%;
transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform-origin:0 0;
background: inherit;
box-shadow:inherit;
backface-visibility:inherit;
}
.cubeFace:before {
top: 100%; left: 0;
transform: rotateX(-90deg);
}
.cubeFace:after {
top: 0; left: 100%;
transform: rotateY(90deg);
}
body:hover .cube{
transform:rotateY(405deg) rotateX(360deg);
}
<h1>Hover me:</h1>
<div class="cube">
<div class="cubeFace"></div>
<div class="cubeFace face2"></div>
</div>
Note that I didn't add the vendor prefixes in the examples. For more info about browser support and what vendor prefixes are needed according to your target audience, see canIuse for 3d transforms.
Basically, you want to do 2 transformations:
rotate the rectangle
squeeze it (skew it)
so basically, you need to do a transform: rotate(x) skew(y, y) and play a bit with size and placing.
here's a little demo I created, based on your own demo:
(I did remove the borders since they felt unneeded to me)
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#c52329;
float:left;
transform: skew(180deg,210deg);
position: absolute;
top: 43px;
}
.square2{
width:100px;
height:100px;
background:#c52329;
float:left;
transform: skew(180deg,150deg);
position: absolute;
left:102px;
top: 43px;
}
.square3{
width:110px;
height:110px;
background:#c52329;
float:left;
transform: rotate(45deg) skew(-15deg, -15deg);
position: absolute;
left: 46px;
top: -42px;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
First let me point out that a skew angle should be between -90deg and 90deg, non-inclusive. All of your skews fall way outside this range.
Limiting myself to sensible skew numbers, it turned out to be quite simple:
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.tile {
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
position: absolute;
}
.square{
transform: skewY(30deg);
top: 43px;
}
.square2{
transform: skewY(-30deg);
left:102px;
top: 43px;
}
.square3{
height: 58px;
left: 50px;
top: -18px;
transform: skew(60deg, -30deg);
}
<div class="mainDiv">
<div class="tile square"></div>
<div class="tile square2"></div>
<div class="tile square3"></div>
</div>
Job done. I've also tidied up the huge repetition of styles into a common class for you.
A single box and 2 pseudos can do this as well.
http://codepen.io/gc-nomade/pen/vGeajp
#square {
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: #C52329;
/*box-shadow: 0 0 5px;*/
width: 90px;
height: 150px;
margin: 5em;
position: relative;
transform: skew(30deg) rotate(30deg);
}
#square:before,
#square:after {
display: inherit;
align-items: center;
justify-content: center;
content: 'before';
position: absolute;
top: 0;
left: 2px;
right: -2px;
bottom: 0;
background: inherit;
border-radius: inherit;
box-shadow: inherit;
transform: translate(100%, -31%) skew(0, -45deg) rotate(0deg);
}
#square:after {
content: 'after';
top: -2px;
left: 0%;
height: 60%;
right: 0;
bottom: 2px;
transform: translate(50%, -100%) rotate(0deg)skew(-45deg)
}
<div id="square">
boxe
</div>
Use the following css for .square3:
.square3{
width:110px;
height:110px;
background:#c52329;
float:left;
transform: rotate(45deg) skew(-15deg, -15deg);
position: absolute;
left: 46px;
top: -42px;
}
Changing the CSS for .square3 should do it:
height: 58px;
left: 50px;
position: absolute;
top: -18px;
transform: skew(240deg, 150deg);
width: 100px;
https://jsfiddle.net/8vuj7peb/26/
I seen this and thought I would add something I came up with while trying to make some old fashioned abc blocks. Making them into 3d I only had to label the main container with another class to change positions and saved on the code. I commented the tutorial in the code. Hope this helps someone. :)
/*-------------------------------------------------------------
First we need to create our container for later reference
-I put this to show in the center of the screen if you wanted to
copy and paste the code into a document for play.
-The width is just to give the margin auto something to center on.
-You really on need the element itself to reference later, but this is prettier
-------------------------------------------------------------*/
.box{
width: 100px;
margin: 200px auto;
text-align: center;
line-height: 5;
}
/*---------------------------------------------------------------------------
The box-wrapper is our real hero container here. This is where we nail our box together.
-set this to relative position for child elements to reference to.
-transform-style is set to preserve-3d because I wanted to keep the look as the text turns with the box. You can also set this to flat, but its not near as cool.
---------------------------------------------------------------------------*/
.box-wrapper{
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
/*-------------------------------------------------------------------------
Here I am just giving the box its needed dimesions and setting them to absolute so nothing gets any ideas of wandering off.
-PLEASE NOTE: the border has 2px and our w:98 h:98 making it a total of 100px. (this is important when we translate later)
-------------------------------------------------------------------------*/
.box-wrapper div{
width: 98px;
height: 98px;
position: absolute;
border: 2px solid black;
border-radius: 5px;
}
/*----------------------------------------------------------------------
Since our sides are 100px we only need to move our box sides 50px to get the edges to match up without gaps.
-Meaning "translate" moves to the position relative to your .box-wrapper. (You can play with this code to see it in action, try to take a visible section of the box and take it down 10).
-Also I use "rotate" y and x to turn our box sheets (.box-wrapper div's)
-----------------------------------------------------------------------*/
.front{
transform: translateZ(50px) rotateY(0deg);
}
.back{
transform: translateZ(-50px) rotateY(180deg);
}
.top{
transform: translateY(-50px) rotateX(90deg);
}
.bottom{
transform: translateY(50px) rotateX(-90deg);
}
.right{
transform: translateX(50px) rotateY(90deg);
}
.left{
transform: translateX(-50px) rotateY(270deg);
}
/*-----------------------------------------------------------------------
Then after all of this we can use our cool box-wrapper to turn this baby
Hope this is helpful! :) Enjoy!
-------------------------------------------------------------------------*/
.box .box-wrapper{
transform: rotateX(-30deg) rotateY(-40deg);
}
.box .box-wrapper div{
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bob the box builder</title>
<link rel="stylesheet" type="text/css" href="boxstyle.css">
<style>
</style>
</head>
<body>
<!--Create our box that holds our stuff -->
<div class="box">
<!--Create our real container that keeps our box sides nailed together-->
<div class="box-wrapper">
<!--Make our box sheets that we will nail together with css-->
<div class="front">Front</div>
<div class="back">Back</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
</body>
</html>
y
|
|____ x
╱
z
Imagine a cube from the front side. What you can see? A square that comes out over the screen. So, for the front side, we have:
.front {
transform : translateZ(50px);
}
for the right side, we have a square that is rotated 90 degrees on Y-Axis and moved on own new Z-Axis:
.right {
transform : rotateY(90deg) translateZ(50px);
}
for the left side, we have a square that is rotated -90 degrees on Y-Axis and moved on own new Z-Axis:
.right {
transform : rotateY(-90deg) translateZ(50px);
}
for the top side, we have a square that is rotated 90 degrees on X-Axis and moved on own new Z-Axis:
.right {
transform : rotateX(90deg) translateZ(50px);
}
for the back side, we have a square that is rotated -180 degrees on Y-Axis and moved on own new Z-Axis:
.right {
transform : rotateY(-180deg) translateZ(50px);
}
Then, Just package them in a shape container class with transform-style: preserve-3d property:
.cube {
transform-style: preserve-3d;
}
finally, you can rotate your cube and see the CSS-3D magic.
.cube {
transform-style: preserve-3d;
transform: rotateX(-40deg) rotateY(45deg);
}
.cube {
transform-style: preserve-3d;
transform: rotateX(-40deg) rotateY(45deg);
}
.side {
position: absolute;
width: 100px;
height: 100px;
background: #c52329;
border: solid 3px white;
}
.front {
transform: translateZ(53px);
}
.top {
transform: rotateX(90deg) translateZ(53px);
}
.right {
transform: rotateY(90deg) translateZ(53px);
}
.left {
transform: rotateY(-90deg) translateZ(53px);
}
.bottom {
transform: rotateX(-90deg) translateZ(53px);
}
.back {
transform: rotateY(-180deg) translateZ(53px);
}
<div class="cube">
<div class="side front"></div>
<div class="side back"></div>
<div class="side right"></div>
<div class="side left"></div>
<div class="side top"></div>
<div class="side bottom"></div>
</div>
It is a full cube. For your approach, you can ignore the back, right, and bottom sides.
Thanks to css-tricks.com
I'm attempting to make a div appear by having it hidden forced via rotate and backface-visibility. The issue is that it is flickering and then disappears after a second. This happens on Chrome. On IE11 it is not appearing at all...
http://jsfiddle.net/1xq96btg/
It's working fine on Firefox.
EDIT: I'm using just backface-visibilty on its own as when I included its variants it became even more unstable and strange behaving.
EDIT 2: z-index doesn't seem to be helping either.
HTML
<div class="one-third-box" onclick="location.href='#'">
<div class="overlay"></div>
<img src="http://www.example.com/image/jpg" />
<div class="box-description">this is a test description</div>
</div>
CSS
.one-third-box {
float: left;
margin-bottom: 2px;
margin-right: 0.2%;
width: 33.2%;
position:relative;
perspective: 1000;
cursor:pointer;
}
.one-third-box:hover {
transform: rotateY(180deg);
transition: 0.6s;
transform-style: preserve-3d;
}
.one-third-box:hover img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter:"FlipH";
position:relative;
top:-1px;
}
.one-third-box:hover .overlay {
backface-visibility: hidden;
}
.box-description {
backface-visibility: hidden;
background: none repeat scroll 0 0 #2f5d70;
bottom: 0;
color: #fff;
font-size: 18px;
font-weight: lighter;
height: 38%;
padding-left: 10%;
padding-top: 6%;
position: absolute;
transform: rotateY(-180deg);
width: 100%;
padding-right: 10%;
}
.overlay {
position:absolute;
width:100%;
height:100%;
background:url('images/overlay.png');
}
.one-third-box > img {
width: 100%;
}
I got it to work by changing the CSS a bit...okay, a lot.
I'm assuming that this was being caused by inconsistent hardware acceleration between the overlapping elements and/or that transform-style: preserve-3d; line. Either way, I've created a snippet that seems to work for me. I also chose to go with a CSS animation instead of a transition because it just makes it that much more readable in this case.
* { margin: 0; padding: 0; } /* Simple CSS reset */
.one-third-box {
position: relative;
display: inline-block;
cursor: pointer;
width: 33.2%;
}
.one-third-box > img {
transform-style: flat;
width: 100%;
transform: translate3d(0,0,0); /* Fixes blur from scaling */
}
.box-description {
position: absolute;
box-sizing: border-box;
backface-visibility: hidden;
background: none repeat scroll 0 0 #2f5d70;
bottom: 0;
color: #fff;
font-size: 18px;
font-weight: lighter;
height: 38%;
padding-left: 10%;
padding-top: 6%;
width: 100%;
padding-right: 10%;
transform: rotateY(-180deg);
}
/* ---------------------- Hover effects ---------------------- */
.one-third-box:hover > img,
.one-third-box:hover > .box-description {
-webkit-animation: flip 0.6s;
animation: flip 0.6s;
transform: rotateY(0deg);
}
/* flip animation */
#-webkit-keyframes flip {
from { transform: rotateY(180deg); }
to { transform: rotateY(0deg); }
}
#keyframes flip {
from { transform: rotateY(180deg); }
to { transform: rotateY(0deg); }
}
<div class="one-third-box" onclick="location.href='#'">
<div class="overlay"></div>
<img src="http://www.surgemedia.ie/portfolio-images/alci-clear.png" />
<div class="box-description">this is a test description</div>
</div>