I'm trying a simple css cube and applying rounded corners shows that the box is empty and transparent, applying backface-visibility: hidden; makes it like filled with white color and the question is, if is there a way to style the appereance of colors and other properties to the behavior of the mentioned property backface-visibility?
backface-visibility: visible
backface-visibility: hidden
.welcome {
color:green;
font-size:36px;
font-family:cursive;
text-align:center;
padding:20px;
}
.* {
background-color: black;
}
h2 {
background-color: aliceblue;
box-shadow: 2px 2px 10px #666;
padding: 0.25em;
text-align:center;
}
div.space3D {
width: 300px;
height: 300px;
margin: 3em auto 0 auto;
border: 1px solid rgb(0,255,0);
position: relative;
perspective-origin: center -50%;
perspective: 300px;
transform: scale(0.75);
transform-style: preserve-3d;
}
div.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: translateZ(-150px);
animation-name: gira;
animation-duration: 15000ms;
animation-iteration-count: infinite;
box-sizing: border-box;
}
div.base {
position: absolute;
width: 150px;
height: 150px;
background-color: rgba(0,0,0,0.15);
transform: translateX(75px) translateY(75px) rotateX(90deg) translateZ(-200px);
box-shadow: 0 0 50px 100px rgba(0,0,0,0.15);
transform-style: preserve-3d;
}
div.cara {
position: absolute;
width: 298px;
height: 298px;
background-color: #c2ffef;
border: 3px solid red;
border-radius: 2em;
font-size: 3em;
color: black;
text-align: center;
line-height: 298px;
box-shadow: 0px 0px 5px rgba(255,150,0,0.25);
transform-style: preserve-3d;
/*backface-visibility:hidden;*/
}
div.cara1 { /* Frente */
transform: translateZ(150px);
}
div.cara2 { /* Atrás */
transform: rotateY(180deg) translateZ(150px);
}
div.cara3 { /* Izquierda */
transform: rotateY(-90deg) translateZ(150px);
}
div.cara4 { /* derecha */
transform: rotateY(90deg) translateZ(150px);
}
div.cara5 { /* abajo */
transform: rotateX(-90deg) translateZ(150px);
}
div.cara6 { /* arriba */
transform: rotateX(90deg) translateZ(150px);
}
#keyframes gira {
0% {
transform: translateZ(-150px) rotateY(0deg);
}
100% {
transform: translateZ(-150px) rotateY(360deg);
}
}
<h2>Cubo 3D con puro HTML5 y CSS3</h2>
<div class="space3D">
<div class="cube">
<div class="base"></div>
<div class="cara cara1">rubik</div>
<div class="cara cara2"></div>
<div class="cara cara3"></div>
<div class="cara cara4"></div>
<div class="cara cara5"></div>
<div class="cara cara6"></div>
</div><!-- termina cubo 3d -->
</div><!-- termina espacio 3d -->
</body>
</html>
Related
I worked with this tutorial, and coded this:
Splitting();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: grey;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
}
.circle .char {
position: absolute;
top: 0;
left: 0;
background: blue;
color: red;
font-size: 4em;
padding: 5px 12px;
border-top: 4px solid black;
border-bottom: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * 12deg)) translateZ(250px);
}
#keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<div class="circle" data-splitting>
Circle-Text-Animation-Effects-
</div>
Unfortunately, I realized that it doesn't work with Chrome and Firefox. They don't show the curvature. I tried to fix it with Autoprefixer, but it didn't help. Has anyone an idea how to solve this issue?
Here is how it should look like, and how it looks like with Safari:
There is an extra span around your letters that need to have transform-style: preserve-3d;
Splitting();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: grey;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
}
/* added this */
.circle > span {
transform-style: preserve-3d;
display: block;
}
/**/
.circle .char {
position: absolute;
top: 0;
left: 0;
background: blue;
color: red;
font-size: 4em;
padding: 5px 12px;
border-top: 4px solid black;
border-bottom: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * 12deg)) translateZ(250px);
}
#keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<div class="circle" data-splitting>
Circle-Text-Animation-Effects-
</div>
I am trying to make an animation of a rotating cube in 3D but the problem is i want the animation to not have any delay between rotations and i just cant get it to work, right now the cube rotates but it stops for a second before it starts the next rotating animation.
(apparently i need more explanation to post this so ignore the following part)
//
I am trying to make an animation of a rotating cube in 3D but the problem is i want the animation to not have any delay between rotations and i just cant get it to work, right now the cube rotates but it stops for a second before it starts the next rotating animation
//
*,
*::before,
*::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: #eee;
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.container {
width: 400px;
height: 400px;
border: 2px solid white;
border-radius: 4px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: top left;
perspective-origin: top left;
}
.cube {
position: relative;
width: 200px;
height: 200px;
animation-name: rotation;
animation-duration: 4s;
animation-delay: 7s;
animation-iteration-count: infinite;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#keyframes rotation {
from {
transform: rotateZ(0deg)
}
/*
50% {
transform: rotateZ(360deg);
} */
to {
transform: rotateZ(360deg)
}
}
.side {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.9;
border: 2px solid white;
}
.front {
background-color: #d50000;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.back {
background-color: #aa00ff;
-webkit-transform: translateZ(-100px);
transform: translateZ(-100px);
}
.left {
background-color: #304ffe;
-webkit-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.right {
background-color: #0091ea;
-webkit-transform: rotateY(-90deg) translateZ(100px);
transform: rotateY(-90deg) translateZ(100px);
}
.top {
background-color: #00bfa5;
-webkit-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background-color: #64dd17;
-webkit-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
.
<body>
<div class="container">
<div class="cube">
<div class="side front"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
</div>
</div>
</body
Rotation stops because of the default animation-timing-function which by default is ease.
So it starts and ends very slowly.
Try to use another value linear.
As the word suggests Linear starts and ends linearly.
For more explanation see this
Code snippet
*,
*::before,
*::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: #eee;
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.container {
width: 400px;
height: 400px;
border: 2px solid white;
border-radius: 4px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: top left;
perspective-origin: top left;
}
.cube {
position: relative;
width: 200px;
height: 200px;
animation-name: rotation;
animation-duration: 4s;/*SPEED*/
animation-delay: 7s;/*REMOVE IF NEEDED*/
animation-iteration-count: infinite;
animation-timing-function: linear;/*EDITED HERE*/
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#keyframes rotation {
from {
transform: rotateZ(0deg)
}
/*
50% {
transform: rotateZ(360deg);
} */
to {
transform: rotateZ(360deg)
}
}
.side {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.9;
border: 2px solid white;
}
.front {
background-color: #d50000;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.back {
background-color: #aa00ff;
-webkit-transform: translateZ(-100px);
transform: translateZ(-100px);
}
.left {
background-color: #304ffe;
-webkit-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.right {
background-color: #0091ea;
-webkit-transform: rotateY(-90deg) translateZ(100px);
transform: rotateY(-90deg) translateZ(100px);
}
.top {
background-color: #00bfa5;
-webkit-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background-color: #64dd17;
-webkit-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
<div class="container">
<div class="cube">
<div class="side front"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
</div>
</div>
Add animation-timing-function: linear; to the .cube code.
How can I achieve the desired effect? I want to create a kind of box that flips around in 3d in the x axis and reveals the other face, all while conserving the same dimensions. Currently the effect is almost working but for some reason one face is always visible. Why does that happen and how to change that?
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
Just add this css properties,
#div2 { z-index: 1;}
#div1:hover #div2 { z-index: 0;}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
z-index: 1;
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
z-index: 0;
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
Add backface-visibility:hidden;
div {
backface-visibility: hidden;
}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
i am trying to create animation that a few lines are rotating around circle div.
Something like this
http://prntscr.com/dxoe8o
this is my html & css
.outCircle {
width: 20px;
height: 20px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.duringTen {
-webkit-animation-duration: 5s;
}
.infinite {
-webkit-animation-iteration-count: infinite;
}
.linear {
-webkit-animation-timing-function: linear;
}
.counter {
width: 30px;
height: 30px;
-webkit-animation-duration: inherit;
-webkit-animation-direction: reverse;
-webkit-animation-timing-function: inherit;
-webkit-animation-iteration-count: inherit;
-webkit-animation-name: inherit;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation-name: circle;
position: relative;
z-index: 10;
display: block;
}
.inner {
width: 20px;
height: 2px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 5px;
background-color: red;
display: block;
}
.red {
background: red;
}
.green {
background: green;
}
#keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
<div class="outCircle">
<div class="rotate linear infinite duringTen">
<div class="counter">
<div class="inner">
</div>
</div>
</div>
</div>
My try is only with one line but i would like to create a few more lines like on the picture i posted above.
This is as far as i have come
Perhaps something like this:
.outCircle {
width: 20px;
height: 20px;
background-color: lightblue;
position: relative;
border-radius: 50%;
margin: 100px auto;
}
.marker {
width: 50px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
transform: translate(-50%, -50%);
}
.vert {
width: 2px;
height: 50px;
background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%);
transform: translate(-50%, -50%);
}
.angle-1 {
transform: translate(-50%, -50%) rotate(45deg);
}
.angle-2 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: circle 3s linear infinite;
}
#keyframes circle {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
<div class="outCircle">
<div class="inner">
<div class="marker horiz"></div>
<div class="marker vert"></div>
<div class="marker angle-1"></div>
<div class="marker angle-2"></div>
</div>
</div>
Note, this is quick and dirty...with a little time it could be simplified, perhaps by using pseudo-elements for some of the markers.
In general though, a SVG might be better.
I've built a UI of a loop of cards however I'm struggling to make the UI work for a fluid screen layout. Can anyone suggest how I could arrange a series of divs into an outer container that can vary in heights and widths? To make things a little easier the container will always follow a portrait dimension.
I've also added a jsFiddle link to allow you to try editing the html / css.
http://jsfiddle.net/w2we2gyd/
<div class="card-preview">
<p>1</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
First off: I'm not a fan of how your CSS is laid out, try to use a preprocessor to structure your code and then just output it regularly. Apart from that, adding the following lines does, make it responsive:
.card-preview p {
left: 50%;
top: 50%;
right: auto;
bottom: auto;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loop-container{
height:100%;
}
.loop-status, .card-preview {
height: 29%;
}
/* Loop container could be variable widths / height */
body, html {
height: 100%;
}
.loop-container
{
width:100%;
height:100%;
}
.loop-status, .card-preview {
position: relative;
top: 0;
left: 0;
float: left;
margin: 10px 5px 5px 5px;
width: 29%;
height: 29%;
background: #fff; }
.loop-status .circle, .card-preview .circle {
border-radius: 50%;
width: 75%;
height: 45%;
z-index: 2;
position: absolute;
top: 25%;
background-color: white;
left: 0;
border: solid 4px #00b9aa;
right: 0;
margin-left: auto;
margin-right: auto;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto; }
.loop-status .circle i, .card-preview .circle i {
display: none; }
.loop-status .circle.loop-correct, .card-preview .circle.loop-correct {
background-color: #00b9aa; }
.loop-status .circle.loop-correct i, .card-preview .circle.loop-correct i {
display: inline;
margin: auto;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
display: block;
color: white;
font-size: 50px;
padding: 10px; }
.loop-status .circle.loop-incorrect, .card-preview .circle.loop-incorrect {
background-color: #A23842; }
.loop-status .circle.loop-incorrect i, .card-preview .circle.loop-incorrect i {
display: inline;
margin: auto;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
display: block;
color: white;
font-size: 50px;
padding: 10px; }
.card-preview {
cursor: pointer;
border: solid 4px #00b9aa;
border-radius: 10px;
overflow: hidden;
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease; }
.card-preview:hover {
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05); }
.card-preview p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
color: #00534c;
font: 25px/105px sans serif;
display: inline-block;
z-index: 3;
line-height: 6.5em; }
.card-preview.current .card-preview-top {
-webkit-animation: pulsate 2s infinite;
-moz-animation: pulsate 2s infinite;
-o-animation: pulsate 2s infinite;
-ms-animation: pulsate 2s infinite;
animation: pulsate 2s infinite; }
.card-preview.answered .card-preview-top {
background-color: white; }
.card-preview.hinted .card-preview-top {
-webkit-animation: pulsateError 2s infinite;
-moz-animation: pulsateError 2s infinite;
-o-animation: pulsateError 2s infinite;
-ms-animation: pulsateError 2s infinite;
animation: pulsateError 2s infinite; }
.card-preview .card-preview-top {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 50%;
background-color: #727272;
z-index: 1; }
.card-preview .card-preview-bottom {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 50%;
background-color: #00b9aa;
z-index: 1; }
/* Added code below */
.card-preview p {
left: 50%;
top: 50%;
right: auto;
bottom: auto;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loop-container{
height:100%;
}
.loop-status, .card-preview {
height: 29%;
}
<div class='loop-container'>
<div class="card-preview">
<p>1</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>2</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>3</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>4</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<!-- Cards should appear in a loop with an empty middle -->
<div class="loop-status" class='overview'>
</div>
<div class="card-preview">
<p>5</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>6</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>7</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>8</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
</div>
The only issue is that you want a margin in pixels, well, you can solve this in the following way:
.loop-status, .card-preview {
/* non-calc supporting fallback */
height: 29%;
/* calc supporting browsers will do this right */
height: calc(100% / 3 - 15px);
width: 29%;
width: calc(100% / 3 - 10px);
margin: 2%;
margin: calc(10px) calc(5px) calc(5px) calc(5px);
}