I am trying to rotate a cube with keyframes so it keeps rotating in the same direction with no rotation backwards and keeps rotating horizontally in one direction without reverse on infinite.
<div class="cube">
<div class="cube-face front"></div>
<div class="cube-face back"></div>
<div class="cube-face right"></div>
<div class="cube-face left"></div>
<div class="cube-face top"></div>
<div class="cube-face bottom"></div>
</div>
CSS degrees run over 360 and don't seem to stop... As you can see with the current keyframes the cube will rotate backwards, is there a solution to keep it going with CSS?
.cube {
width: 250px;
height: 250px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(315deg) rotateY(-45deg);
animation: rotate-cube 5s infinite;
margin-bottom: 50px;
cursor: pointer;
}
.cube-face {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 250px;
height: 250px;
border: 2px solid black;
font-size: 90px !important;
font-weight: bold;
color: #000;
}
.cube .front {
background: #f15d2a;
transform: rotateY(0deg) translateZ(125px);
}
.cube .right {
background: #0063a6;
transform: rotateY(90deg) translateZ(125px);
}
.cube .back {
background: #ed1652;
transform: rotate(0deg) rotateY(180deg) translateZ(125px);
}
.cube .left {
background: #12b259;
transform: rotateX(0) rotateY(-90deg) translateZ(125px);
}
.cube .top {
background: #fff;
transform: rotateY(0deg) rotateX(90deg) translateZ(125px);
}
.cube .bottom {
background: #ffd54c;
transform: rotatey(90deg) rotateX(-90deg) translateZ(125px);
}
#keyframes rotate-cube {
0% {
transform: rotateX(315deg) rotateY(-45deg);
}
33.33% {
transform: rotateX(315deg) rotateY(-135deg);
}
66.66% {
transform: rotateX(315deg) rotateY(-225deg);
}
100% {
transform: rotateX(315deg) rotateY(-45deg);
}
}
See example on codepen
Assuming you want the end and start to have the same rotation, you can set the final rotation to -405deg (360 + 45).
This should make sure the animation continues in the correct direction.
0% {
transform: rotateX(315deg) rotateY(-45deg);
}
33.33% {
transform: rotateX(315deg) rotateY(-135deg);
}
66.66% {
transform: rotateX(315deg) rotateY(-225deg);
}
100% {
transform: rotateX(315deg) rotateY(-405deg);
}
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>
I wanna create brochure which open to the left and the right when someone hover over it.
I use transform-origin: 0% and transform: rotateY(-180deg) for the left site of the brochure to open to the left site (Card red and blue). For the right side I use of course transform-origin: 100% and transform: rotateY(180deg) to open to the right site (Card green).
But the actual behavior of the right side is, that it applies transform-origin: 0% and rotates behind the left site of the brochure (Thats why you can't see it, but its there).
I can't understand why transform-origin: 100% don't take affect.
here is the code: https://jsfiddle.net/eL6q3hp4/2/
.book-container {
height: 350px;
width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.book-part {
height: auto;
width: auto;
position: absolute;
transform-style: preserve-3d;
top: 0;
left: 0;
}
.book-part > .card {
height: 350px;
width: 250px;
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* RIGHT SITE */
.right-part {
transform-origin: 0%;
}
.right-card {
transform: rotateY(-180deg);
}
.book-container:hover .right-part {
transform: rotateY(180deg);
transition: 0.7s;
transition-delay: 0.3s;
}
/* LEFT SITE */
.left-part {
transform-origin: 100%;
}
.left-card {
transform: rotateY(180deg);
}
.book-container:hover .left-part {
transform: rotateY(-180deg);
transition: 0.7s;
}
.middle-card {
background-color: blue;
}
.right-card {
background-color: green;
}
.left-card {
background-color: red;
}
.front-card {
background-color: yellow;
}
<div class="book-container">
<div class="book-part middle-part">
<div class="card middle-card"></div>
</div>
<div class="book-part right-part">
<div class="card right-card"></div>
</div>
<div class="book-part left-part">
<div class="card left-card"></div>
<div class="card front-card"></div>
</div>
</div>
Remove absolute position from .book-part and invert the rotation values. You can also add a front card to the right block
I also added transition to the closing effect:
.book-container {
height: 350px;
width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}
.book-part {
transform-style: preserve-3d;
}
.book-part>.card {
height: 350px;
width: 250px;
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* RIGHT SITE */
.right-part {
transform-origin: 0%;
transition: 0.7s;
}
.right-card {
transform: rotateY(180deg);
}
.book-container:hover .right-part {
transform: rotateY(-180deg);
transition-delay: 0.3s;
}
/* LEFT SITE */
.left-part {
transform-origin: 100%;
transition: 0.7s;
transition-delay: 0.3s;
}
.left-card {
transform: rotateY(-180deg);
}
.book-container:hover .left-part {
transform: rotateY(180deg);
transition-delay: 0s;
}
<div class="book-container">
<div class="book-part middle-part">
<div class="card middle-card" style="background:blue"></div>
</div>
<div class="book-part right-part">
<img class="card right-card" style="background:green">
<img class="card front-card" style="background:pink;">
</div>
<div class="book-part left-part">
<img class="card left-card" style="background:red">
<img class="card front-card" style="background:yellow">
</div>
</div>
You can also simplify your code like below:
.book-container {
height: 350px;
width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
background:blue;
}
.book-container > div{
transform-style: preserve-3d;
}
.book-container > div:before,
.book-container > div:after{
content:"";
height: 350px;
width:100%;
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
background:yellow;
}
/* RIGHT SITE */
.right-part {
transform-origin: 0%;
transition: 0.7s;
}
.book-container .right-part:before {
transform: rotateY(180deg);
background:green;
}
.book-container:hover .right-part {
transform: rotateY(-180deg);
transition-delay: 0.3s;
}
/* LEFT SITE */
.left-part {
transform-origin: 100%;
transition: 0.7s;
transition-delay: 0.3s;
}
.book-container .left-part:before {
transform: rotateY(180deg);
background:red;
}
.book-container:hover .left-part {
transform: rotateY(180deg);
transition-delay: 0s;
}
<div class="book-container">
<div class="right-part">
</div>
<div class="left-part">
</div>
</div>
I don't know if in the original situation you work with dynamic sizes (in which case this solution would not apply), but you can use a pixel value for transform-origin to make it work:
.book-container {
height: 350px;
width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.book-part {
height: auto;
width: auto;
position: absolute;
transform-style: preserve-3d;
top: 0;
left: 0;
}
.book-part > .card {
height: 350px;
width: 250px;
position: absolute;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* RIGHT SITE */
.right-part {
transform-origin: 250px;
}
.right-card {
transform: rotateY(180deg);
}
.book-container:hover .right-part {
transform: rotateY(180deg);
transition: 0.7s;
transition-delay: 0.3s;
}
/* LEFT SITE */
.left-part {
transform-origin: 0%;
}
.left-card {
transform: rotateY(-180deg);
}
.book-container:hover .left-part {
transform: rotateY(-180deg);
transition: 0.7s;
}
.middle-card {
background-color: blue;
}
.right-card {
background-color: green;
}
.left-card {
background-color: red;
}
.front-card {
background-color: yellow;
}
<div class="book-container">
<div class="book-part middle-part">
<div class="card middle-card"></div>
</div>
<div class="book-part right-part">
<div class="card right-card"></div>
</div>
<div class="book-part left-part">
<div class="card left-card"></div>
<div class="card front-card"></div>
</div>
</div>
The cards are supposed to flip to reveal text on the back side. This works perfectly fine on my windows laptop and also on phones but seems to not work on Mac. Why is that?
I found a similar question asked on 2013 -webkit-transform: rotateY fails on Mac OS (in Chrome)
I hope it's either been fixed or there's a workaround for this by now.
Please help. Here's a codepen
Code:
HTML:
<div id="services" class="servicesSection">
<div id="production" class="serviceCard service music">
<h4 class="card__face card__face--front">PRODUCTION</h4>
<p class="card__face card__face--back">This includes the creation of the complete backing track with
state of the art sound design and FX.</p>
</div>
<div id="songwriting" class="serviceCard service video">
<h4 class="card__face card__face--front">SONGWRTING / COMPOSITION</h4>
<p class="card__face card__face--back">We create a melody from scratch based on the concept of your song
and write lyrics as well.</p>
</div>
<div id="vocal" class="serviceCard service event">
<h4 class="card__face card__face--front">VOCAL PRODUCTION</h4>
<p class="card__face card__face--back">We polish and tune your vocals. This includes all the vocal FX &
stacking to make it sound well-rounded and professional. </p>
</div>
<div id="mixing" class="serviceCard service tech">
<h4 class="card__face card__face--front">MIXING/MASTERING</h4>
<p class="card__face card__face--back">Audio post-production to give you a release ready track which
will be of top-notch quality and match industry standards.</p>
</div>
<div id="sound" class="serviceCard service music">
<h4 class="card__face card__face--front">SOUND SUITES</h4>
<p class="card__face card__face--back">We tailor-make sound packages for your brand. We will create
music to emulate your brand's message. This will be completely unique to your brand to give it the
recall value it deserves.</p>
</div>
</div>
CSS:
.servicesSection {
display: flex;
align-items: center;
background-color: #FFFFFF;
/* height: 100vh; */
/* scroll-snap-align: center; */
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
min-height: 100vh;
}
.service {
display: flex;
flex-direction: column;
flex: 1;
width: 25vw;
height: 25vw;
}
.musicService .serviceCard h4 {
margin: auto
}
.service a {
object-fit: contain;
margin: auto;
text-align: center;
text-decoration: none;
}
.service img {
object-fit: contain;
margin-top: auto
}
.service h4 {
margin: auto;
color: white;
margin-top: 20px
}
.homeService, .service {
cursor: pointer;
border: #fff 1px solid;
}
.video {
/* background-color: #3b5998; */
background-image: linear-gradient(to right, #8E0E00, #1F1C18)
}
.music {
/* background-color: #d61b1e */
background-image: linear-gradient(to right, #1F1C18, #8E0E00)
}
.event {
/* background-color: #FF7514; */
background-image: linear-gradient(to right, #1F1C18, #203A43, #2C5364)
}
.tech {
/* background-color: #38908f; */
background-image: linear-gradient(to right, #2C5364, #1F1C18)
}
.serviceCard {
height: 25vw !important;
transform-style: preserve-3d;
transform-origin: center;
transition: transform 500ms;
/* transition-delay: 0.500ms; */
cursor: pointer;
width: 100%;
height: 100%;
position: relative;
margin-left: 1px;
margin-right: 1px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateX(0%) rotateY(0deg);
box-shadow: 0 0 0 #000;
transform: translate3d(0, 0, 0);
-webkit-transition: 500ms;
-webkit-transform-style: preserve-3d;
-ms-transition: 500ms;
-moz-transition: 500ms;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 500ms;
transform-style: preserve-3d;
}
/* .serviceCard * {
pointer-events: none;
} */
.serviceCard.is-flipped {
transform: rotateY(-180deg);
backface-visibility: visible;
}
.card__face .card__face--back {
/* -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden; */
-webkit-transition: 100ms;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(360deg);
-moz-transition: 100ms;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(360deg);
-o-transition: 100ms;
-o-transform-style: preserve-3d;
-o-transform: rotateY(360deg);
-ms-transition: 100ms;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(360deg);
transition: 100ms;
transform-style: preserve-3d;
transform: rotateY(360deg);
}
.card__face {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
}
.card__face--back {
transform: rotateY(180deg);
font-size: 18px;
padding: 5px;
background-color: #fff;
color: #000;
border: 1px solid #222;
font-weight: 900;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
letter-spacing: 0.5px;
}
jQuery:
$(document).ready(function () {
$('.serviceCard h4, .serviceCard p').on('mouseover', function () {
event.target
$(this).parent().addClass('is-flipped');
var parent = event.target.parentElement.id
bindMouseLeave(parent)
});
function bindMouseLeave(parent) {
$(this).on('mouseleave', function () {
// setTimeout(() => {
if (!event.target.parentElement.id || event.target.parentElement.id != parent)
$('#' + parent).removeClass('is-flipped');
// }, 1500);
});
}
})
scale3d(sx, sy, sz)
I can't understand what scale3d() really do when I change (sz) Value
In this below code you can see the value of (sz) is = 1
body{perspective:600px}
div{
width: 300px;
height: 300px;
background-color: burlywood;
margin: auto;
border-radius:40px;
transition: all 5s ease-in-out;
transform: scale3d(1,1,1)
}
<div></div>
In this below code you can see the value of (sz) is = 0.5
but nothing changed the same result
body{perspective:600px}
div{
width: 300px;
height: 300px;
background-color: burlywood;
margin: auto;
border-radius:40px;
transition: all 5s ease-in-out;
transform: scale3d(1,1,0.5)
}
<div></div>
Note : I tried all solutions & values but nothing happened
The third number in scale3d is for the z-axis, which is only applicable to three-dimensional shapes.
Your examples have perspective, but they're still just use two-dimensional shapes, so nothing happens.
You can see the effect with a true cube:
scale3d(1,1,1)
#wrapper {
perspective: 1200px;
width: 200px;
height: 200px;
margin: 80px auto;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) scale3d(1, 1,1);
transition: transform 1s;
}
#cube>div {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
#cube>div span {
margin: auto;
font-size: 50px;
}
#left {
background-color: rgba(25, 25, 112, 0.7);
transform: rotateY(-90deg) translateZ(100px);
}
#right {
background-color: rgba(47, 79, 79, 0.7);
transform: rotateY(90deg) translateZ(100px);
}
#front {
background-color: rgba(119, 136, 153, 0.7);
transform: rotateY(0deg) translateZ(100px);
}
#back {
background-color: rgba(72, 61, 139, 0.7);
transform: rotateX(180deg) translateZ(100px);
}
#top {
background-color: rgba(0, 128, 128, 0.7);
transform: rotateX(90deg) translateZ(100px);
}
#bottom {
background-color: rgba(70, 130, 180, 0.7);
transform: rotateX(-90deg) translateZ(100px);
}
<div id="wrapper">
<div id="cube">
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="front"><span>front</span></div>
<div id="back"><span>back</span></div>
<div id="top"><span>top</span></div>
<div id="bottom"><span>bottom</span></div>
</div>
</div>
scale3d(1,1,0.5)
#wrapper {
perspective: 1200px;
width: 200px;
height: 200px;
margin: 50px auto;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) scale3d(1,1,0.5);
transition: transform 1s;
}
#cube > div {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
#cube > div span {
margin: auto;
font-size: 50px;
}
#left {
background-color: rgba(25,25,112,0.7);
transform: rotateY(-90deg) translateZ(100px);
}
#right {
background-color: rgba(47,79,79,0.7);
transform: rotateY(90deg) translateZ(100px);
}
#front {
background-color: rgba(119,136,153,0.7);
transform: rotateY(0deg) translateZ(100px);
}
#back {
background-color: rgba(72,61,139,0.7);
transform: rotateX(180deg) translateZ(100px);
}
#top {
background-color: rgba(0,128,128,0.7);
transform: rotateX(90deg) translateZ(100px);
}
#bottom {
background-color: rgba(70,130,180,0.7);
transform: rotateX(-90deg) translateZ(100px);
}
<div id="wrapper">
<div id="cube">
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="front"><span>front</span></div>
<div id="back"><span>back</span></div>
<div id="top"><span>top</span></div>
<div id="bottom"><span>bottom</span></div>
</div>
</div>
What is Scale3d?
(Sample at end, see link)
Your 1st code:
transform: scale3d(1,1,1)
Your 2nd code:
transform: scale3d(1,1,0.5)
This is:
scale3d ( <scaling-value-x> , <scaling-value-y> , <scaling-value-z> )
Your example is a 2d shape with no effect thats why. Z pane is used to make 3d objects.
Try Here and see how it works.