Trying to make a css3 cube I started with this..
<div class="box">
<div class="left"></div>
<div class="front"></div>
<div class="right"></div>
<div class="back"></div>
</div>
css:
.box {
position: relative;
top: 300px;
left: 300px;
width: 300px;
height: 300px;
}
.left {
position: absolute;
top: 0;
left: 0;
background: #ff4d4d;
height: 300px;
width: 300px;
transform: translate(-300px, 0px) rotateY(80deg);
-webkit-transform: translate(-300px, 0px) rotateY(80deg);
-moz-transform: translate(-300px, 0px) rotateY(80deg);
-o-transform: translate(-300px, 0px) rotateY(80deg);
z-index: 1;
}
.front {
background: #ff6b6b;
height: 300px;
width: 300px;
position: absolute;
top: 0;
left: 0;
}
I've made a fiddle here http://jsfiddle.net/E9Q7w/..
What's going on here is that the rotate is applying, and the translate does push the box in the X axis. But the rotation axis/centre is not pushed. It's still in the middle of the box. like translate is not doing what it's suppose to be doing, right? why is that? what am I missing?
You are using the wrong values. rotateX and rotateY don't exist. If you want to select where to rotate it from, use transform-origin:, transform-origin-(x/y/z)
transform: translate(-300px, 0px) rotate(80deg);
-webkit-transform: translate(-300px, 0px) rotate(80deg);
-moz-transform: translate(-300px, 0px) rotate(80deg);
-o-transform: translate(-300px, 0px) rotate(80deg);
Here are some docs on transform-origin - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Related
I want to expand the sides of a cube while it rotate like in this pen.
I have tried to create a cube that will spin along x axis but while doing so I want it to also expand its sides after some duration.
Below is my code...
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.cube-wrap {
width: 40px;
height: 40px;
-webkit-perspective: 2000px;
-webkit-perspective-origin: 50% -500px;
}
.single-box {
display: block;
position: absolute;
width: 40px;
height: 40px;
background-color: #60c2ef;
-webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
-webkit-transform-origin: 50% 50% 0;
}
.box {
-webkit-transform-style: preserve-3d;
-webkit-animation: rotate 1.5s infinite linear;
}
.side-front {
background-color: blue;
-webkit-transform: translateZ(20px);
}
.side-back {
background-color: blue;
-webkit-transform: rotateY(180deg) translateZ(20px);
}
.side-top {
background-color: blue;
-webkit-transform: rotateX(90deg) translateZ(20px);
}
.side-bottom {
background-color: blue;
-webkit-transform: rotateX(-90deg) translateZ(20px);
}
.side-left {
background-color: blue;
-webkit-transform: rotateY(-90deg) translateZ(20px);
}
.side-right {
background-color: blue;
-webkit-transform: rotateY(90deg) translateZ(20px);
}
#-webkit-keyframes rotate {
0% { -webkit-transform: rotateY(0); }
100% { -webkit-transform: rotateY(360deg); }
}
<div class="wrapper">
<div class="cube-wrap">
<div class="box">
<div class="single-box side-back"></div>
<div class="single-box side-top"></div>
<div class="single-box side-bottom"></div>
<div class="single-box side-left"></div>
<div class="single-box side-right"></div>
<div class="single-box side-front"></div>
</div>
</div>
</div>
The above code will rotate along x axis. It is fine. Along with that, say after 3s or so, I want the cube to rotate slowly and expand along the sides... How can I do it? Could someone help me with this?
This might sound like a stupid answer.. but the answer is actually already in the Codepen that you provided yourself.
In case you're unfamiliair with sass/codepen.
In codepen you can select the dropdown icon and choose for view copiled css
I would suggest to copy the already existing code and then customize it to your own needs.
You could also fork the pen and change it in the codepen environment.
Alright, so I have two problems, the first problem is that I want the animation to rotate over the X-axes, but it looks weird, because it's not spinning inside each other, Fiddle
Then my other problem is, when I add something like scale(1.5) to the transform animation, it just seems to ignore the rotation, it just won't work anymore.
HTML
<div class="coin-wrapper">
<div class="animate coin">
<div class="terrorist"></div>
<div class="counter-terrorist"></div>
</div>
</div>
CSS
.animate{
animation: rotate 5s;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateX(2160deg);
-moz-transform: rotateX(2160deg);
transform: rotateX(2160deg);
}
}
.coin-wrapper {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.coin .counter-terrorist, .coin .terrorist {
position: absolute;
width: 200px;
height: 200px;
}
.coin .terrorist {
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/terrorist.png');
background-size:cover;
}
.coin .counter-terrorist {
transform: rotateY(180deg);
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/counter-terrorist.png');
background-size:cover;
}
The height of the .coin element is being calculated as 0, so that's where the transform-origin is. If you make the coin fill its parent, then it looks good. You can work around the scaling problem by applying scale to the wrapper instead of the coin.
.animate{
animation: rotate 5s;
}
.coin-wrapper {
animation: scale 5s;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateX(2160deg);
-moz-transform: rotateX(2160deg);
transform: rotateX(2160deg);
}
}
#-webkit-keyframes scale {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
}
.coin-wrapper {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.coin {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.coin .counter-terrorist, .coin .terrorist {
position: absolute;
width: 200px;
height: 200px;
}
.coin .terrorist {
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/terrorist.png');
background-size:cover;
}
.coin .counter-terrorist {
transform: rotateY(180deg);
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/counter-terrorist.png');
background-size:cover;
}
<div class="coin-wrapper">
<div class="animate coin">
<div class="terrorist"></div>
<div class="counter-terrorist"></div>
</div>
</div>
When I run this animation on Safari, there is a unwanted offset between wrapper and target, which should be at the center of wrapper. This code work well on others browsers including IE.
A strange thing is that the position of the target in developer tool is correct, but it just rendered with offset.
Here is the screenshot.
Is there any hack to take over this problem?
My safari version: 10.1.1
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-animation: flip 2s;
animation: flip 2s;
}
#-webkit-keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
Thanks for any help!
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: relative;
margin: 0 auto;
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: -30px;
right: 0;
-webkit-animation: flip 2s;
animation: flip 2s;
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(60px,0) rotateX(0deg);
transform: translate(60px,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(0px,0) rotateX(360deg);
transform: translate(0px,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
u can try this code..
I need a little help with fitting these diagonal divs to page to create a perfect X that I can then click on to bring either side of the X to the foreground through a js onclick to z-index change. I have all that covered but I've never dealt with diagonal div's and can't seem to make them fit to page properly to form a perfect X without getting a scroll bar:
.x1 {
background-color: #2cb5e8;
opacity: 0.4;
transform: skewY(-145deg);
position: absolute;
overflow: hidden;
padding: 10% 44%;
margin: 10% 0% 0% 0%;
z-index: 1002;
}
.x1>.wrapper {
-webkit-transform: skewY(145deg);
-moz-transform: skewY(145eg);
-ms-transform: skewY(145deg);
-o-transform: skewY(145deg);
transform: skewY(145deg);
}
.x2 {
background-color: #0fb8ad;
opacity: 0.4;
transform: skewY(145deg);
position: absolute;
overflow: hidden;
padding: 10% 44%;
margin: 10% 0% 0% 0%;
z-index: 1001;
}
.x2>.wrapper {
-webkit-transform: skewY(145deg);
-moz-transform: skewY(145deg);
-ms-transform: skewY(145deg);
-o-transform: skewY(145deg);
transform: skewY(145deg);
}
.page {
min-height: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
}
<div class="page">
<div class="x1">
<div class="wrapper">
<br>
</div>
</div>
<div class="x2">
<div class="wrapper2">
<br>
</div>
</div>
</div>
Since you are dealing with javascript. You can simply get the distance of the box from the top of the container .page and add a padding-top to .page container itself.
Get the dimension of one of the bar example bar with class .x1
Compute the top position of .x1 and padding the parent to shift down its contents
Snippet below
document.getElementsByClassName("page")[0].style.paddingTop=-(document.getElementsByClassName("x1")[0].getBoundingClientRect().top)+"px";
.x1 {
background-color: #2cb5e8;
/*opacity: 0.4;*/
transform: skewY(-145deg);
position: absolute;
overflow: hidden;
padding: 10% 44%;
margin: 10% 0% 0% 0%;
z-index: 1002;
}
.x1>.wrapper {
-webkit-transform: skewY(145deg);
-moz-transform: skewY(145eg);
-ms-transform: skewY(145deg);
-o-transform: skewY(145deg);
transform: skewY(145deg);
}
.x2 {
background-color: #0fb8ad;
/*opacity: 0.4;*/
transform: skewY(145deg);
position: absolute;
overflow: hidden;
padding: 10% 44%;
margin: 10% 0% 0% 0%;
z-index: 1001;
}
.x2>.wrapper {
-webkit-transform: skewY(145deg);
-moz-transform: skewY(145deg);
-ms-transform: skewY(145deg);
-o-transform: skewY(145deg);
transform: skewY(145deg);
}
.page {
min-height: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
}
<div class="page">
<div class="x1">
<div class="wrapper">
<br>
</div>
</div>
<div class="x2">
<div class="wrapper2">
<br>
</div>
</div>
</div>
I made an animation with CSS3, i've already do that in other page but this now don't work and i don't know why please help me! I don't see my mistake i have already test position : absolute but nothing.
This is my HTML:
<body>
<header id="header">
<nav>
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</nav>
</header>
</body>
and this my CSS3 :
#toggle {
width: 28px;
height: 30px;
float: left;
opacity: 0.5;
}
#toggle:hover{
opacity: 0.9;
}
#toggle div {
width: 100%;
height: 5px;
background: white;
margin: 4px auto;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
#toggle.on .one {
-webkit-transform: rotate(45deg) translate(5px, 5px);
-moz-transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on .two {
opacity: 0;
}
#toggle.on .three {
-webkit-transform: rotate(-45deg) translate(7px, -8px);
-moz-transform: rotate(-45deg) translate(7px, -8px);
}
#header{
position: fixed;
top: 0;
left: 0;
width: 80px;
height: 70px;
background-color: rgba(0,0,0, 0.9);
}
Thanx a lot for your answers !
If you want it to rotate when you click on them, use this:
#toggle .one:active {
-webkit-transform: rotate(45deg) translate(5px, 5px);
-moz-transform: rotate(45deg) translate(5px, 5px);
}
#toggle .two:active {
opacity: 0;
}
#toggle .three:active {
-webkit-transform: rotate(-45deg) translate(7px, -8px);
-moz-transform: rotate(-45deg) translate(7px, -8px);
}