I want to zoom into a circle(div) until it passes the "camera". I've tried perspective, but that didn't work. At least the way I used it.
Here is my HTML:
:<html>
<body>
<div class="test"></div>
</body>
</html>
Here is my css:
.test{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border:2px solid coral;
width:100px;
height:100px;
border-radius:50%;
}
Is there a way to do this ?
This is way how you can do it without any js. But pay attention, adapt .wraper height for your own project.
For example this property helps to remove scrollbars:
overflow: hidden;
Also it's important that parent div need to be relative position and child div - absolute.
.wraper {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.circle {
width: 30px;
height: 30px;
position: absolute;
top: 50%;
right: 50%;
transform: translateX(50%) translateY(-50%);
border-radius: 50%;
border: 2px solid #000;
animation-name: example;
animation-duration: 15s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
#keyframes example {
0% {width: 30px; height: 30px;}
100% {width: 3000px; height: 3000px;}
}
<div class="wraper">
<div class="circle">
</div>
</div>
please try
.test:hover{
transform: scale(1.5);
}
<div class="test"></div>
use
transform: scale(1.5, 1.5);
Related
This question already has an answer here:
How to keep origin in center of image in scale animation?
(1 answer)
Closed 1 year ago.
So I'm trying to implement a loader that spins in the middle of the screen I have used transform:translate earlier do this ex:
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
I tried to implement something similar but instead of getting centered the top left appears to be in the center. Here's my code
HTML
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
CSS
.waitwrapper{
background-color: #455879;
position: relative;
width: 98vw;
height: 97vh;
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
width: 20%;
aspect-ratio:1;
animation: spin 2s linear infinite;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
One trusted way to centralize one item is to use display: flex with justify-content: center and align-items: center in the parent element.
*, *::before, *::after{
box-sizing:border-box;
}
.waitwrapper{
background-color: #455879;
width: 98vw;
height: 97vh;
display:flex;
justify-content:center;
align-items:center
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
width: 20%;
aspect-ratio:1;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
But why your code doesn't work very well? I must tell you when you change transform property in your animation actually you overwrite it. And because of it transform: translate(-50%, -50%);, doesn't work enymore. For solve that problem you can use below solution
.waitwrapper{
background-color: #455879;
position: relative;
width: 98vw;
height: 97vh;
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
width: 20%;
aspect-ratio:1;
animation: spin 2s linear infinite;
position: absolute;
left:50%;
top:50%;
/* transform:translate(-50%,-50%); */
}
#keyframes spin {
0%{
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
Don't use transform. Use display: flex; on the parent and margin: auto; on the spinner element — to center it both horizontally and vertically.
See the code comments for the needed changes:
/* Quick reset */ * {margin: 0; box-sizing: border-box; }
.loader-wrapper {
background-color: #455879;
position: fixed; /* why relative? use fixed! Should cover the page? */
z-index: 9999; /* overlay other elements */
width: 100vw;
height: 100vh;
display: flex; /* use display flex */
}
.loader {
height: 20%; /* use height instead of width */
aspect-ratio: 1;
margin: auto; /* center inside the flex parent */
border: 10px solid #f3f3f3;
border-top-color: transparent; /* use transparent instead */
border-radius: 50%;
animation: spin 2s linear infinite;
}
#keyframes spin {
to { transform: rotate(1turn); }
}
<section class="loader-wrapper">
<div class="loader"></div>
</section>
Here is one of the ways how to center position-absolute element with width set:
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top:0;
bottom:0;
width:20%;
Complete snippet:
.waitwrapper{
background-color: #455879;
position: relative;
width: 98vw;
height: 97vh;
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
aspect-ratio:1;
animation: spin 2s linear infinite;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top:0;
bottom:0;
width:20%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
</body>
</html>
I am trying to make a wave effect in css, for that was trying to put a big rotating div with rounded corner at bottom of the page.
But for each refresh of the page, it is moving up or down with no reason, no matter what I was doing.
I don't know it is bad idea to put a div larger size than page itself. But I am not getting any reason why it is jumping around.
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}
div {
width: 500vh;
height: 500vh;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
animation-duration: 10s;
animation-name: example;
animation-iteration-count: infinite;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
}
#keyframes example{
from{ transform: rotate(0deg);}
to{ transform: rotate(360deg);}
}
here is complete HTML
<!DOCTYPE html>
<html>
<head>
<style>
html {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}
div {
width: 500vh;
height: 500vh;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
animation-duration: 10s;
animation-name: example;
animation-iteration-count: infinite;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
}
#keyframes example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
please help
Thanks in advance!
Your body properties aren't defined, simply add it like so :
html,body {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}
To avoid problems like these, I would recommend always using a div container and not relying on html and body (which behavior is not always constant between browsers).
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
width: 100%;
height: 100%;
clip: auto;
position: relative;
overflow: hidden;
}
div#wavecontainer {
width:100%;
height:100%;
overflow: hidden;
top: 0%;
left: 0%;
position:relative;
}
div#wave {
width: 500vh;
height: 500vh;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
animation-duration: 10s;
animation-name: example;
animation-iteration-count: infinite;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
}
#keyframes example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wavecontainer">
<div id="wave"></div>
</div>
</body>
</html>
I have elements with position: absolute; that I want to transition in certain situations. However, the origin of the width and height transition seems to depend on the top/bottom left/right values.
Is there any way to have more control over this?
I am specifically looking to transition from the center of the div.
Is there any solution that doesn't rely on transitioning also the top/bottom left/right values?
Edit:
I want to keep the width and height transitioning.
Thank you for the answers but using Transform scale is not a solution in this case. Percentages in the Transform property refer to the size of the element's border box, not the container. See for example this JSFiddle, how the end result of hovering over the two elements is different.
JSFiddle
div, span {
width:30%;
height:30%;
background:pink;
transition:all 1s ease;
position:absolute;
}
*:hover{
width:10%;
height:10%;
}
div{
top:10%;
left:10%;
}
span{
bottom:10%;
right:10%;
}
<div></div>
<span></span>
Well, you can always use transform - scale for that matter:
div {
background:pink;
width:200px;
height:200px;
transition:all 1s ease;
}
div:hover{
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
}
<div></div>
I would suggest using transform: translate when animating positions since it's better for performance and you can then control its origin with transform-origin.
And if you want to change the width or height you can similarly use transform: scale.
Say you want to double something in size from the center outwards. Then you'd just need to write transform: scale(2.0), since the default value of transform-origin is 50% 50%.
See example here: https://jsfiddle.net/ydpx284g/
You could change the position at the same time to simulate the effect. But I'm with the others: transform: scale is a better approach to this.
div, span {
width:30%;
height:30%;
background:pink;
transition:all 1s ease;
position:absolute;
}
div{
top:10%;
left:10%;
}
div:hover{
width:10%;
height:10%;
top: 20%;
left: 20%;
}
span{
bottom:10%;
right:10%;
}
span:hover{
width:10%;
height:10%;
bottom: 20%;
right: 20%;
}
<div></div>
<span></span>
Version with transforms:
div, span {
width:30%;
height:30%;
background: red;
transition: all 1s ease;
position: absolute;
}
div{
top:10%;
left:10%;
}
div:hover{
transform-origin: 50% 50%;
transform: scale(0.3);
}
span{
bottom:10%;
right:10%;
}
span:hover{
transform-origin: 50% 50%;
transform: scale(0.3);
}
<div></div>
<span></span>
The best way is using matrix, this allows you to combine transitions and transformations.
The matrix takes 6 arguments
transform: matrix(a, b, c, d, e, f);
Where
a= scale X axis
b= skewX
c= skewY
d= scale Y axis
e= position X
f= position Y
In this case, I set the scale on the X axis (which is going to alter the width) to the double of the initial width after hover. (the value 2 means initial scale times 2)
The scale on the Y axis is not altered (the value 1 means initial scale times 1, so the height won't change) The rest of the arguments are 0 because you don't need to use them in this case.
.example {
width: 30%;
height: 30%;
background-color: pink;
position: absolute;
top: 35%;
left: 35%;
transition: width, height, transform 1s;
}
.example:hover {
transform: matrix(2, 0, 0, 1, 0, 0);
}
<div class="example"></div>
Not sure if this is exactly what you're looking for, but this solution is not based on the transform: scale and you can manually set the desired width and height of your div on hover even in percentage.
And the percentage is relative to the width of the container.
HTML
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS
#container{
width: 400px;
height: 400px;
background: #eee;
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #000;
width: 20%;
height: 20%;
transition: 0.3s;
cursor: pointer;
}
.box:hover{
width: 7%;
height: 10%;
}
.box:nth-child(2){
left: 20%;
}
.box:nth-child(3){
top: 20%;
}
.box:nth-child(4){
top: 20%;
left: 20%;
}
#container {
width: 400px;
height: 400px;
background: #eee;
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #000;
width: 20%;
height: 20%;
transition: 0.3s;
cursor: pointer;
}
.box:hover {
width: 7%;
height: 10%;
}
.box:nth-child(2) {
left: 20%;
}
.box:nth-child(3) {
top: 20%;
}
.box:nth-child(4) {
top: 20%;
left: 20%;
}
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
You can try using transform: translate(-50%, -50%); see if that helps.
.example {
width: 30%;
height: 30%;
background: pink;
transition: all 1s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.example:hover {
width: 10%;
height: 10%;
}
<div class="example"></div>
Is this what are you trying to achieve? using translate will change the position of the element based on the width and height of the element itself.
div, span {
width:30%;
height:30%;
background:pink;
transition:all 1s ease;
position:absolute;
transform: translate(-50%, -50%);
}
*:hover{
width:10%;
height:10%;
}
div{
top:25%;
left:25%;
}
span{
top:75%;
left:75%;
}
<div></div>
<span></span>
I was making a carousel in the vertical direction, but on rotating 180deg of the X-axis, the backside of the carousel seems like its orientation is not proper in the 3D space.
I would prefer that the solution provided contains not just the code, but also reasoning why this is happening.
#container1 {
position: relative;
left: 100px;
width: 200px;
height: 600px;
transform-style: preserve-3d;
transform-origin: 0 300px 0;
perspective-origin: 100px 300px 0;
perspective: 800px;
animation-name: rotate;
animation-duration: 5s;
}
#keyframes rotate {
from {transform: rotateX(0deg);}
to {transform: rotateX(180deg);}
}
#container1 div {
position: absolute;
top: 225px;
width: 150px;
height: 150px;
}
#div1 {
transform: rotateX(0deg) translateZ(130px);
background-color: red;
}
#div2 {
transform: rotateX(60deg) translateZ(130px);
background-color: blue;
}
#div3 {
transform: rotateX(120deg) translateZ(130px);
background-color: green;
}
#div4 {
transform: rotateX(180deg) translateZ(130px);
background-color: brown;
}
#div5 {
transform: rotateX(240deg) translateZ(130px);
background-color: orange;
}
#div6 {
transform: rotateX(300deg) translateZ(130px);
background-color: pink;
}
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container1">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</div>
<script src="script.js"></script>
</body>
</html>
The problem is you put perspective in the #container. You should put the perspective in the "stage". Here you can the implementation: JSFiddle
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