Using CSS, I am trying to create a rectangular prism with rounded edges like those in the photo below.
So far, I have specified the border radius for the top and bottom sides. The problem is that I do not know a way to get the left and right edges of the other sides to curl inwards. As a result, there should not be any holes at the corners. Is there a certain CSS property or trick I could use to do that?
Code from https://jsfiddle.net/jkantner/oqo73a2h/:
.cube {
top: 100px;
left: 100px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(-45deg);
}
.left, .right, .front, .top, .back, .bottom {
position: absolute;
}
.left, .right {
background: #06a;
width: 150px;
height: 150px;
}
.front, .back {
background: #048;
width: 300px;
height: 150px;
}
.top, .bottom {
background: #08c;
border-radius: 30px;
width: 300px;
height: 150px;
}
.front {
z-index: 2;
}
.top {
transform-origin: 0% 100%;
transform: translateY(-150px) rotateX(-90deg);
z-index: 2;
}
.left {
transform-origin: 100% 100%;
transform: translateX(-150px) rotateY(90deg);
z-index: 2;
}
.right {
transform-origin: 0% 0%;
transform: translateX(300px) rotateY(-90deg);
}
.back {
transform: translateZ(150px);
}
.bottom {
transform-origin: 0% 0%;
transform: translateY(150px) rotateX(90deg);
}
<div class='cube'>
<div class='front'></div>
<div class='top'></div>
<div class='left'></div>
<div class='right'></div>
<div class='back'></div>
<div class='bottom'></div>
</div>
If you specify the border-radius for the left and right sides and the front and back sides, just as you did for the top and bottom:
.left, .right {
background: #06a;
border-radius: 30px;
width: 150px;
height: 150px;
}
.front, .back {
background: #048;
border-radius: 30px;
width: 300px;
height: 150px;
}
You will get a rounded rectangular prism, as seen here.
Related
I want to move the blue container around the circle (with it's bottom margin if possible). What I succeded until now is to move it by it's center(still not so smooth).
Does css has any option to translate & rotate in a circle direction? What I tried was to translate and rotate at the same time by using this three points (top, right, and top-right) of the circle, because I only need it to rotate 90 deg.
#mainContent{ position: relative;
display: block;
width: 100vw;
border: none;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle{
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container{
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element{
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 60px;
background: blue;
transform-origin: center;
transform: translate(-50%, -50%);
animation: orbit 3s linear infinite;
}
#keyframes orbit{
0% {
transform-origin: center;
transform: translate(-50%, calc(-50% - 50px)) rotate(0deg);
}
50%{
transform-origin: center;
transform: translate(calc(-50% + 35.35px), calc(-50% - 35.35px)) rotate(45deg);
}
100% {
transform-origin: center;
transform: translate(calc(-50% + 50px), -50%) rotate(90deg);
}
}
*{
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
You have to play with the transform-origin
#mainContent {
position: relative;
display: block;
width: 100vw;
border: none;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle {
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element {
position: absolute;
top: 50%;
left: calc(50% - 10px);
width: 20px;
height: 60px;
background: blue;
transform-origin: top center;
animation: orbit 3s linear infinite;
}
#keyframes orbit {
to {
transform: rotate(360deg);
}
}
* {
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
If i understand right, you need to set the translate-origin to the side which the blue rectangle reach the center of the red circle, check the snipet:
(hover the red circle to hide the blue rectangle)
div {
position: relative;
width: 200px;
height: 200px;
margin: 10em auto;
}
.round {
border-radius: 100%;
background: red;
}
.round:hover + .rectangle{background:transparent;}
.rectangle {
width: 100%;
height: 20px;
background: blue;
position: absolute;
top: 0;
bottom: 0;
right: 50%;
margin: auto;
transform-origin: right;
transform: rotate(0deg);
animation: orbit 3s linear infinite;
}
.moon{
width:50px;height:50px;
background:white;
border:1px solid gray;
border-radius:100%;
position:absolute;
top:0;
bottom:0;
margin:auto;
}
#keyframes orbit {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(359deg);
}
}
<div>
<div class="round"></div>
<div class="rectangle">
<div class="moon"></div>
</div>
</div>
Don't center the element but put it on the top side and then adjust the transform-origin to make it at the center of the circle:
#mainContent {
position: relative;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle {
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element {
position: absolute;
top: calc(50% - 80px); /* 80 = (60 + 100)/2*/
left: calc(50% - 10px);
width: 20px;
height: 60px;
background: blue;
transform-origin: 50% calc(100% + 20px); /* 20 = (100 - 60)/2 */
animation: orbit 3s linear infinite;
}
#keyframes orbit {
100% {
transform: rotate(360deg);
}
}
* {
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
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'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>
So I'm doing this for some lines on my webpage.
#keyframes dropHeader {
0% {
height: 0px;
}
100% {
height: 100%;
}
}
.slant-decor {
left: 50%;
height: 100%;
position: fixed;
display: inline-flex;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.6s;
}
.slant-decor:after {
width: 5px;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
content: "";
position: relative;
margin-left: -5px;
transform: skewX(-30deg);
display: inline-block;
}
.slant-decor div {
width: 19px;
height: 100%;
display: inline-block;
margin-left: -4px;
-ms-transform: skewX(-30deg); /* IE 9 */
-webkit-transform: skewX(-30deg); /* Safari */
transform: skewX(-30deg); /* Standard syntax */
}
.decor-orange {
background-color: orange;
}
.decor-red {
background-color: red;
}
.decor-green {
background-color: green;
}
<div class="slant-decor">
<div class="decor-red"></div>
<div class="decor-orange"></div>
<div class="decor-green"></div>
</div>
As of right now, the animation on .slant-decor works fine, however - as you can see, it causes a kind of a weird effect on the lines. What I'd like to achieve is that the animation follow the skew angle aswell, creating an effect where the lines would slide in from the top of the page, at the right angle. How could I achieve this?
If my understanding is correct, setting a transform-origin: right top would produce the effect that you are looking for. The default value for transform-origin is 50% 50% (the center-mid point of the element). When you animate the height, this point is constantly changing and hence creates that weird effect. If the transform-origin is set to a point that is fixed then that problem would be avoided.
#keyframes dropHeader {
0% {
height: 0px;
}
100% {
height: 100%;
}
}
.slant-decor {
left: 50%;
height: 300px;
position: fixed;
display: inline-flex;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.6s;
}
.slant-decor:after {
width: 5px;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
content: "";
position: relative;
margin-left: -5px;
transform-origin: right top;
transform: skewX(-30deg);
display: inline-block;
}
.slant-decor div {
width: 19px;
height: 100%;
display: inline-block;
margin-left: -4px;
transform-origin: right top;
transform: skewX(-30deg);
}
.decor-orange {
background-color: orange;
}
.decor-red {
background-color: red;
}
.decor-green {
background-color: green;
}
<div class="slant-decor">
<div class="decor-red"></div>
<div class="decor-orange"></div>
<div class="decor-green"></div>
</div>
I am trying to make a responsive cuboid using HTML/CSS but the right face of the cuboid is not aligning with the remaining faces.
Can anyone help me out with this?
I am pasting a jsfiddle link for the same, below:
#container {
width: 100vw;
height: 100vh;
perspective: 1000px;
perspective-origin: 50% 50%;
}
#container div {
height: 100vh;
/*width: 100%;*/
position: absolute;
/*display: inline-block;*/
transform-origin: 50% 50%;
transform-style: preserve-3d;
}
#left {
width: 100vh;
background: steelblue;
transform: translateX(-50vh) translateZ(-50vh) rotateY(90deg);
}
#right {
width: 100vh;
background: teal;
transform: translateX(50vw) rotateY(-90deg);
}
#floor {
width: 100%;
background: #55DF03;
transform: translateY(50vh) translateZ(-50vh) rotateX(90deg);
}
#ceil {
width: 100%;
background: grey;
transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg);
}
#back {
width: 100%;
background: #2091FE;
transform: translateZ(-100vh);
}
<div id="container">
<div id="left"></div>
<div id="floor"></div>
<div id="right"></div>
<div id="ceil"></div>
<div id="back"></div>
</div>
https://jsfiddle.net/srikanthaero/4s8wovjm/
Here is the responsive 3D Cuboid face:
#container {
width: 100vw;
height: 100vh;
perspective: 1000px;
perspective-origin: 50% 50%;
}
#container div {
height: 100vh;
/*width: 100%;*/
position: absolute;
/*display: inline-block;*/
transform-origin: 50% 50%;
transform-style: preserve-3d;
}
#left {
width: 100vh;
background: steelblue;
transform: translateX(-50vh) translateZ(-50vh) rotateY(90deg);
}
#right {
width: 100vh;
background: teal;
transform: translateX(0%) rotateY(-90deg);
right: 0px;
TRANSFORM-ORIGIN: 100% 100% !important;
}
#floor {
width: 100%;
background: #55DF03;
transform: translateY(50vh) translateZ(-50vh) rotateX(90deg);
}
#ceil {
width: 100%;
background: grey;
transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg);
}
#back {
width: 100%;
background: #2091FE;
transform: translateZ(-100vh);
}
<div id="container">
<div id="left"></div>
<div id="floor"></div>
<div id="right"></div>
<div id="ceil"></div>
<div id="back"></div>
</div>
I have changed the way to move the elements, it's easier to change the transform origin that to play with translates:
body {
margin: 0px;
}
#container {
width: 100vw;
height: 100vh;
perspective: 1000px;
perspective-origin: 50% 50%;
}
#container div {
height: 100vh;
width: 100vw;
position: absolute;
transform-style: preserve-3d;
}
#container #left {
width: 100vh;
background: steelblue;
transform-origin: left center;
transform: rotateY(90deg);
}
#container #right {
width: 100vh;
background: teal;
transform-origin: right center;
transform: rotateY(-90deg);
right: 0px;
}
#floor {
width: 100%;
background: #55DF03;
transform: translateY(50vh) translateZ(-50vh) rotateX(90deg);
}
#ceil {
width: 100%;
background: grey;
transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg);
}
#back {
width: 100%;
background: #2091FE;
transform: translateZ(-100vh);
opacity: 0.5;
}
<div id="container">
<div id="left"></div>
<div id="floor"></div>
<div id="right"></div>
<div id="ceil"></div>
<div id="back"></div>
</div>
On a side note, you are asking:
For left face, when I use 'translateX(-50vh)', it aligns perfectly. But I felt that it should have aligned on 'translateX(-50vw)'. How '-50vh' is sufficient?
The left side has a width of 100vh. The transform origin is center, so the rotation of 90deg is made around a point that is 50vh (the half of 100vh) to the right of the left border of the element. To make it fit, you need to translate in X minus this amount.
Also, if you want to keep your original way of work, the right style should be
#right {
width: 100vh;
background: teal;
right: 0px;
transform: translateX(50vh) translateZ(-50vh) rotateY(-90deg);
}
Notice that positioning it to the right simplifies a lot the problem.