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
Related
When I try to use the transform: rotate(xDeg); (in my case transform: rotate(90deg)) it just doesn't rotate no matter what tutorial I follow or what I do.
body {
background-color: black;
}
.rotate {
width: 200px;
height: 200px;
background-color: red;
margin: 200px;
}
.rotate:hover {
transform: rotate(90deg);
}
<div class="rotate"></div>
When you try to use the transform: rotate(90Deg) it rotates but due to square you will not see the rotation because it rotates in a fraction of seconds but when you apply transition on rotating you can see it clearly.
Now, if you look at the rectangle you can understand clearly what I'm talking about.
body {
display: grid;
place-items: center;
background-color: black;
}
.rotate {
width: 200px;
height: 200px;
background-color: red;
margin: 20px;
}
.rotate:hover {
transform: rotate(90deg);
transition: all 0.5s ease;
}
.rac {
width: 200px;
height: 100px;
background-color: red;
margin: 50px 20px;
}
.rac:hover {
transform: rotate(90deg);
}
<div class="rotate"></div>
<div class="rac"></div>
You should add transition otherwise you will not see the difference
body{
background-color:black;
}
.rotate {
width:200px;
height:200px;
background-color:red;
margin:200px;
transition: transform .5s ease-in-out;
}
.rotate:hover {
transform: rotate(90deg);
}
<html>
<link rel="stylesheet" type="text/css" href="e.css">
<div class="rotate"></div>
</html>
I'm trying to get into CSS animations and I can't figure out how to "transform: translateZ(200px)" on the span element with the ".logo" class.
I want to have "Z-Text" floating on the yellow background of "#box3", I applied the preserve-3d transform-style but without any effect.. translateX and Y working fine though.
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 400px;
width: 400px;
border: 1px solid white;
}
#outer-box {
height: 100px;
width: 100px;
background-color: black;
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}
#outer-box > div {
position: absolute;
}
#box2 {
height: 100px;
width: 100px;
top: -50px;
background-color: green;
transform: rotateX(0.25turn);
}
#box3 {
height: 100px;
width: 100px;
background-color: yellow;
top: 50px;
opacity: 0.5;
transform-style: preserve-3d;
transform: rotateX(0.25turn);
perspective: 1000px;
}
.logo {
position: absolute;
transform: translateZ(200px);
}
#box4 {
height: 100px;
width: 100px;
left: 50px;
background-color: blue;
opacity: 0.5;
transform: rotateY(0.25turn);
}
#keyframes spin {
0% {
transform: rotateY(0) rotateX(0deg);
}
50% {
transform: rotateY(180deg) rotateX(180deg);
}
75% {
transform: rotateY(270deg) rotateX(270deg);
}
100% {
transform: rotateY(359deg) rotateX(359deg);
}
}
<div class="container">
<div id="outer-box">
<div id="box2">Any Text</div>
<div id="box3">
<span class="logo">Z-Text</span>
</div>
<div id="box4">Some Text</div>
</div>
</div>
Any suggestions?
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);
I'm designing a rotating cube logo for my portfolio site. After trying all night, for some reason my 3D cube logo is no longer a cube. Two problems:
The shape of the cube is distorted. The .front div is larger than all the other divs for the cube. I can't see why this is happening.
When .container div's animation is commented out, you'll notice the viewer position is head on. I need the view position to be more 'isometric', like the viewer is looking at the edge of the cube from above. I've tried to rotate the Z- and Y-axis of the .container div to achieve this but no luck so far. Un-comment the background-color: pink; on the .container div to see this.
I have a feeling the above problems are to do with the perspective property. I'm not sure how to calculate the correct amount of perspective here, and this could be my problem.
Here's my CodePen link.
HTML:
<div class="container">
<div class="cube">
<div class="front"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="back"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="left"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="right"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="top"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="bottom"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
</div>
</div>
CSS:
html {
background: #666;
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
.container {
position: relative;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 400px;
/* background-color: pink; */
transform-style: preserve-3d;
perspective: 1000px;
animation: rotate 2000ms linear infinite;
}
.cube {
/* background-color: blue; */
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border: 5px solid #ccc;
box-sizing: border-box;
background-size: cover;
}
.cube img {
width: 100%;
opacity: 1;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
#keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
There are an issue because you rotate the container and its perspective as well.
you want a perspective on the cube, you have to set the perspective property on body element (or any kind of container of your animation that is not animated itself) and avoid to set it on the animated element. Actually, moving the element that is set by a perspective value will move this 3D element inside a 2D view – its own parent element. That causes the weird cube rendering on your exemple.
Also, if you want to control the perpective origin, you can use perspective-origin that lets you determine the position at which the viewer is looking. Associated with perspective property, you will be able to control the whole rendered scene.
So, the result will change with following code:
html { background: #666; }
body {
margin: 0;
padding: 0;
height: 100vh;
perspective: 900px;
perspective-origin: bottom;
}
.container {
position: relative;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 400px;
transform-style: preserve-3d;
animation: rotate 2000ms linear infinite;
}
.cube {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border: 5px solid #ccc;
box-sizing: border-box;
background-size: cover;
}
.cube img {
width: 100%;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
#keyframes rotate {
to { transform: rotateY(360deg); }
}
<body>
<div class="container">
<div class="cube">
<div class="front"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="back"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="left"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="right"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="top"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="bottom"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
</div>
</div>
</body>
I'm playing around with browsers lately, and now I'm fighting with 3D. WebGL is awesome, and I can do 3D in CSS3 too? Even better! Ok, so my vision was to create floating 3D objects using nested transformations (with preserve-3d).
HTML
<div class="scene">
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
<div class="box">
<div class="side_1"></div>
<div class="side_2"></div>
<div class="side_3"></div>
<div class="side_4"></div>
<div class="side_5"></div>
<div class="side_6"></div>
</div>
</div>
CSS (I'm using prefixfree)
.scene {
perspective: 3500;
perspective-origin: 25% 100%;
animation: spin 15s infinite linear;
transform-style: preserve-3d;
width: 960px;
height: 350px;
margin: 80px auto;
}
.box {
width: 150px;
height: 180px;
position: absolute;
transform-style: preserve-3d;
top: 40px;
}
.box div {
width: 150px;
height: 180px;
opacity: 0.75;
background-color: #bada55;
position: absolute;
}
.box .side_1 {
transform: rotateY( 0deg ) translateZ( 75px );
background-color: #FF0;
}
.box .side_2 {
transform: rotateX( 180deg ) translateZ( 75px );
background-color: #F00;
}
.box .side_3 {
transform: rotateY( 90deg ) translateZ( 75px );
background-color: #CCC; }
.box .side_4 {
transform: rotateY( -90deg ) translateZ( 75px );
background-color: #000;
}
.box .side_5 {
height: 150px;
width: 150px;
background-color: #00a2ff;
transform: rotateX( 90deg ) translateZ( 75px ); }
.box .side_6 {
height: 150px;
background-color: #00a2ff;
width: 150px;
transform: rotateX( -90deg ) translateZ( 105px ); }
.box:first-child {
position: absolute;
top: 40px;
}
.box:last-child {
right: 0;
}
.box:nth-child(2) {
background: url(../img/dot.jpg) repeat-y center center transparent;
transform: translateZ( -600px );
left: 480px;
}
.box:nth-child(3) {
background: url(../img/dot.jpg) repeat-y center center transparent;
transform: translateZ( 600px );
left: 480px;
}
#keyframes spin {
0% { transform: rotateY(0); }
100% { transform: rotateY(360deg); }
}
Everything is set up, and works. But wait, what is happening? Why does the far object is bigger than close one? I don't understand. Is it webkit bug, or I'm missing something?
http://stretchbox.org/projects/Nextgen/floaters.php - here you have an example.
.scene is also rotating, so you need to apply the perspective and perspective-origin on its parent, which in your case would be body.
body {
perspective: 3500;
perspective-origin: 25% 100%;
}
You can see a demo here:
http://jsfiddle.net/dw58P/embedded/result/
Nice project by the way!