I have a 3d cube rotation, that happens on hover. Everything works fine except one thing. When you roll over and the cube rotates showing a new side with text....the text is backwards, not sure why this is happening. I have a JS fiddle set up, and any help I can get on this would be great.
http://jsfiddle.net/c3ewZ/6/
html:
This is back
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
css
body {
margin:0px;
padding:0px;
}
.box-scene {
-webkit-perspective: 700;
height: 180px;
float:left;
z-index: 999;
padding:0px !important;
}
.box-scene:hover .box {
-webkit-transform: rotateY(90deg);
}
.box {
width: 100%;
height: 100%;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.4s ease-out;
-webkit-transform-origin: 90px 90px -90px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: 2;
background: #d9d9d9;
}
.side {
background: #9dcc78;
-webkit-transform: rotateY(90deg);
z-index: 1;
left: 0px;
}
JS
var resizer = function () {
var width = parseInt($(".box-scene").css("width"));
$(".box").css("-webkit-transform-origin", "center center -" + width / 2 + "px");
};
resizer();
$(window).resize(function () {
resizer();
});
Rotating the panel the other way will fix the mirror imaging of the text.
.box-scene:hover .box {
-webkit-transform: rotateY(-90deg);
}
Related
Im attempting to make a clicker game with html css and javascript, and was trying to get some cursors to be animated like the ones that click for you in cookie clicker.
you will probably see what I mean when you run the project
I just want the cursors to move away from the div and then back again
here is my code:
const images = document.querySelectorAll("img");
images.forEach(function(e) {
let randomval = Math.floor(Math.random() * (359 - 0 + 1))
e.style.transform = "rotate(" + randomval + "deg)";
});
* {
margin: 0;
padding: 0;
}
.clicked {
margin: 100px;
width: 300px;
height: 300px;
border-radius: 100%;
background-color: aquamarine;
}
#keyframes clickeranim {
0% {
transform: translate(0, 150px);
}
50% {
transform: translate(0, 165px);
}
100% {
transform: translate(0, 150px);
}
}
.wrapper {
position: absolute;
width: 13.1px;
height: 17px;
position: absolute;
top: 250px;
left: calc(250px - calc(13.1px / 2));
transform-origin: 50% -150px;
transform: translate(0, 150px);
animation: clickeranim 1s infinite ease-in-out;
}
img {
width: 13.1px;
height: 17px;
transform-origin: 50% -150px;
}
<div class="clicked"></div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
<div class="wrapper">
<img src="https://via.placeholder.com/32">
</div>
I create a slider with some logos, but the animation doesn't start. I create it with only css but it remains blocked. I check few time the code but I can find the answer.
The slider should scroll and change the logo, but it doesn't work.
I think that it could be also created with javascript but I'm not sure how to do it.
Can someone help me?
.slider {
width: 960px;
height: 100px;
overflow: hidden;
position: relative;
margin: auto;
}
.slider::before,
.slider::after {
content: "";
position: absolute;
width: 200px;
height: 100px;
background: linear-gradient(to right, width 0%, rgba(255, 255, 255, 0) 100%);
z-index: 2;
}
.slider::before {
top: 0;
left: 0;
}
.slider::after {
top: 0;
right: 0;
transform: rotateZ(180deg);
}
.slider .slide img {
width: 200px;
height: 100px;
}
.slider .slider-track {
display: flex;
width: calc(200px * 20);
animation: scroll 4s ease 3s infinite linear;
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-200px * 10));
}
}
<div class="slider">
<div class="slider-track">
<div class="slide">
<img src="./1.png">
</div>
<div class="slide">
<img src="./2.png">
</div>
<div class="slide">
<img src="./3.png">
</div>
<div class="slide">
<img src="./4.png">
</div>
<div class="slide">
<img src="./5.png">
</div>
<div class="slide">
<img src="./6.png">
</div>
<div class="slide">
<img src="./7.png">
</div>
<div class="slide">
<img src="./8.png">
</div>
<div class="slide">
<img src="./9.png">
</div>
<div class="slide">
<img src="./10.png">
</div>
</div>
</div>
Your animation property is wrong.
use these properties instead. This is more readable and it makes it easier to avoid similar mistakes:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
https://www.w3schools.com/cssref/css3_pr_animation.asp
.slider {
width: 960px;
height: 100px;
overflow: hidden;
position: relative;
margin: auto;
}
.slider::before,
.slider::after {
content: "";
position: absolute;
width: 200px;
height: 100px;
background: linear-gradient(to right, width 0%, rgba(255, 255, 255, 0) 100%);
z-index: 2;
}
.slider::before {
top: 0;
left: 0;
}
.slider::after {
top: 0;
right: 0;
transform: rotateZ(180deg);
}
.slider .slide img {
width: 200px;
height: 100px;
}
.slider .slider-track {
display: flex;
width: calc(200px * 20);
animation: scrolll 4s ease;
}
#keyframes scrolll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-200px * 10));
}
}
<div class="slider">
<div class="slider-track">
<div class="slide">
<img src="./1.png">
</div>
<div class="slide">
<img src="./2.png">
</div>
<div class="slide">
<img src="./3.png">
</div>
<div class="slide">
<img src="./4.png">
</div>
<div class="slide">
<img src="./5.png">
</div>
<div class="slide">
<img src="./6.png">
</div>
<div class="slide">
<img src="./7.png">
</div>
<div class="slide">
<img src="./8.png">
</div>
<div class="slide">
<img src="./9.png">
</div>
<div class="slide">
<img src="./10.png">
</div>
</div>
</div>
I've never felt so silly asking a SO question... but here is goes.
I've created a skew which works a charm, see here
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, -7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, 7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
But when I try to make the skew the opposite way round, everything just turns into mayhem and I have no idea why this is happening - surely it's just reversing the numbers of the skew around? This is my code...
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(-7deg, 0deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(7deg, 0deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
Can somebody put me out of my misery here? PS- I apologise in advance for being a plonker.
The reason it doesn't work is because skew(ax, ay). If you simply reversed the angles, you would be changing x-axis instead of y-axis. So use an inverse angle instead. 7deg becomes -7deg
Read about skew here.
Do it like this:
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, 7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, -7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
Here is an example of how you can achieve the same result using :before selector. Less nesting.
.container {
text-align: center;
height: 300px;
width:900px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.container:before {
content: "";
position: absolute;
background: darkOrange;
height:100%;
width: 200%;
transform: rotate(15deg);
top: -35%;
left: -25%;
z-index: -1;
}
h1 {
z-index: 1;
color: white;
width: 100%;
line-height: 120px;
text-align: center;
}
<div class="container">
<h1>Exmaple </h1>
</div>
Using this method, the text will not be skewed
change the -7 into a 7 in the skew
and for the content flip them over so ts like this skew(0deg, -7deg)
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, 7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, -7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
Take a look at this CodePen to see what I mean:
.perspective-container {
margin: 50px 0;
perspective: 1000px;
perspective-origin: 0 50%;
}
.card {
border: 10px solid blue;
width: 300px;
height: 300px;
overflow: hidden;
transform: rotateY(-45deg);
}
.card-inner {
width: 300px;
height: 300px;
overflow: hidden;
}
.scroller {
transform: translate(0, -100px);
}
.scroller-3d {
transform: translate3d(0, -100px, 0);
}
.will-change {
will-change: transform;
}
<h1>Incorrect (uses will-change):</h1>
<div class="perspective-container">
<div class="card"><div class="card-inner">
<div class="scroll-container">
<div class="scroller will-change">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div></div>
</div>
<h1>Incorrect (uses translate3d):</h1>
<div class="perspective-container">
<div class="card">
<div class="scroll-container">
<div class="scroller-3d">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
<h1>Correct (uses neither translate3d or will-change):</h1>
<div class="perspective-container">
<div class="card">
<div class="scroll-container">
<div class="scroller">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
I have a rotated element with perspective applied, inside of which I have a 'scrolling' div which is transformed vertically (imagine a magazine page-turn experience with scrolling divs inside each page). I added will-change: transform to the inner div and that broke the outer container overflow: hidden. This seems to be a bug with the Chrome compositor.
Does anyone know of any workarounds? I would like to keep the will-change attribute because it significantly speeds-up animations on mobile Chrome.
Edit: It looks like this is not specific to the will-change property but any property that makes the inner div its own compositing layer. When I remove the will-change property but change the transform to a translate3d that similarly improves performance and exhibits the bug. The only class on the inner div that allows the rotated parent to correctly render overflow: hidden is the one that adds the 2D transform.
Try something like this CodePen:
.container {
margin: 75px 0;
}
.card {
border: 10px solid blue;
width: 300px;
height: 300px;
overflow: hidden;
-webkit-transform: perspective(1000px) rotateY(-45deg);
transform: perspective(1000px) rotateY(-45deg);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.scroller {
-webkit-transform: translate(0, -100px);
transform: translate(0, -100px);
}
.scroller-3d {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
.will-change {
will-change: transform;
}
<h1>Uses will-change:</h1>
<div class="container">
<div class="card">
<div class="scroll-container">
<div class="scroller will-change">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
<h1>Uses translate3d:</h1>
<div class="container">
<div class="card">
<div class="scroll-container">
<div class="scroller-3d">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
<h1>Uses neither translate3d or will-change:</h1>
<div class="container">
<div class="card">
<div class="scroll-container">
<div class="scroller">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
You could play with perspective() and transform-origin values.
I want to make flip like http://desandro.github.io/3dtransforms/examples/card-01.html
But with buttons on each side. So here is my html
<div class="flip-container">
<div class="flip">
<div class="side front">
<p>front</p>
<button class="front-flip-button">flip</button>
</div>
<div class="side back">
<p>back</p>
<button class="back-flip-button">flip</button>
</div>
</div>
</div>
and css
.flip-container{
position: relative;
-webkit-perspective: 800;
width: 500px;
height: 300px;
}
.flip{
position: absolute;
width: inherit;
height: inherit;
-webkit-transform-style: preserve-3d;
-webkit-transition-duration: 500ms;
-webkit-transform: translate3d(0, 0, 0);
border: 1px solid;
}
.side{
position: absolute;
width: inherit;
height: inherit;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.flip.flipped,
.back{
-webkit-transform: rotate3d(0, 1, 0, 180deg);
}
.back-flip-button,
.front-flip-button{
position: absolute;
left: 0;
top: 0;
}
p{
font-size: 90px;
text-align: center;
}
And everything is pretty good, but when I use some element with translateZ it makes back button unclickable.
<div class="flip-container">
<div class="flip">
<div class="side front">
<p>front</p>
<button class="front-flip-button">flip</button>
</div>
<div class="side back">
<p>back</p>
<button class="back-flip-button">flip</button>
</div>
</div>
</div>
<div class="some"></div>
Why is that happening?
http://jsfiddle.net/j5Sm4/
Apply this
.back-flip-button {
... Your other styles ...
-webkit-transform:translateZ(1px);
-webkit-backface-visibility:hidden;
/* Needs other prefixes to be cross browser */
}
Demo
This is because the parent element gets its own stacking order. To equalize the stacking order and thus put the button on top, you have to give it a stacking order which I did using translateZ. The backface-visibility:hidden makes the button not show on the front side
In the future we will likely be able to do this by applying the will-change property to the back side