I am trying to create a cube out of shorter, stacked rectangular prisms but have run into some issues. I am not concerned about IE just yet, but I am concerned about the huge difference in rendering between Chrome, FF and Safari.
Chrome (v44.0.2403.155)
Safari (v8.0.3)
Firefox (v40.0.2)
Check out the live demo here: http://codepen.io/okeegan/pen/yNWNaw
The basic structure is (edited for brevity):
<div class="allsort positioned"><!-- Wrapper -->
<div class="allsort__layer"><!-- Individual prism in cube -->
<div class="allsort__layer-side bottom"></div><!-- side of prism -->
<div class="allsort__layer-side left"></div>
<div class="allsort__layer-side right"></div>
<div class="allsort__layer-side top"></div>
<div class="allsort__layer-side front"></div>
<div class="allsort__layer-side back"></div>
</div>
</div>
With the following styles:
.page {
perspective: 1000px;
position: fixed;
width: 100%;
height: 100%;
}
.allsort {
backface-visibility: visible;
transition: all 2s;
position: relative;
top: calc(50% - 50px);
width: 100px;
height: 100px;
margin: 0 auto;
}
.allsort.positioned .allsort__layer.pink-1 {
transform: translateY(0) rotateX(-45deg) rotateZ(45deg);
}
.allsort.positioned .allsort__layer.black-1 {
transform: translateY(8px) rotateX(-45deg) rotateZ(45deg);
}
.allsort.positioned .allsort__layer.cream {
transform: translateY(16px) rotateX(-45deg) rotateZ(45deg);
}
.allsort.positioned .allsort__layer.black-2 {
transform: translateY(24px) rotateX(-45deg) rotateZ(45deg);
}
.allsort.positioned .allsort__layer.pink-2 {
transform: translateY(30px) rotateX(-45deg) rotateZ(45deg);
}
.allsort__layer {
backface-visibility: visible;
transform-style: preserve-3d;
transform: translateY(1000px) rotateX(-45deg) rotateZ(45deg);
transition: all 2s ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 65px;
height: 65px;
}
.allsort__layer-side {
backface-visibility: visible;
transition: all 400ms;
transition-delay: 2s;
transform-origin: 50% 50%;
}
.allsort__layer-side.top {
background-color: magenta !important;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 55px;
}
.allsort__layer-side.bottom {
transform: translateZ(12px);
background-color: yellow !important;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 55px;
}
.allsort__layer-side.left {
transform-origin: top center;
transform: rotateX(90deg);
background-color: green !important;
height: 12px;
left: 0;
position: absolute;
top: 0;
width: 55px;
}
.allsort__layer-side.right {
transform-origin: center left;
transform: rotateY(-90deg);
background-color: orange !important;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 12px;
}
.allsort__layer-side.front {
transform-origin: top center;
transform: rotateX(90deg);
background-color: blue !important;
height: 12px;
left: 0;
position: absolute;
top: 55px;
width: 55px;
}
.allsort__layer-side.back {
transform-origin: center left;
transform: rotateY(-90deg);
background-color: red !important;
height: 55px;
left: 55px;
position: absolute;
top: 0;
width: 12px;
}
I have tried fiddling with the order of side stacking in the HTML with poor results. Are there any obvious problems with my setup? I'm pretty sure I've tried every combo of transform-style: preserve-3d and backface-visibility: visible possible but maybe there's a secret formula?
Related
I'm trying to fill this nos bottle then slowly empty it up with css so first the "fill" goes up then slowly slowly drains down, I tried but came with a very terrible result
#bottle, #fill {
position: fixed;
top: 50%;
left: 50%;
}
.box {
width: 96px;
height: 195px;
border-radius: 10px;
text-align: center;
color: #ddd;
font-size: 25px;
font-weight: 600;
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
}
.box:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: #00acee;
left: 50%;
transform: translateX(-50%);
border-radius: 40%;
animation: fill 1s cubic-bezier(0, 1.62, 0.27, -0.67) infinite;
z-index: -1;
}
#keyframes fill {
from {
top: 250px;
transform: translateX(-50%) rotate(0deg);
}
to {
top: -50px;
transform: translateX(-50%) rotate(360deg);
}
}
<div class="box">
<img id="bottle" src="https://cdn.discordapp.com/attachments/350561379234873354/813833593084313650/bottle.png" width=100 height=200>
</div>
If anyone could point how can i achieve this would be awesome.
You can try something like that, but you should consider just left backgroung transparent inside bottom image, outside put a solid color, like black.
#bottle, #fill {
top: 50%;
left: 50%;
}
.box {
width: 96px;
height: 195px;
border-radius: 10px;
text-align: center;
color: #ddd;
font-size: 25px;
font-weight: 600;
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
}
.box:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: #00acee;
left: 50%;
transform: translateX(-50%);
border-radius: 40%;
animation: fill 7s cubic-bezier(1, 2.7, 1, -1.7) infinite;
z-index: -1;
}
#keyframes fill {
from {
top: 450px;
transform: translateX(-50%) rotate(0deg);
}
to {
top: -50px;
transform: translateX(-50%) rotate(360deg);
}
}
<div class="box">
<img id="bottle" src="https://cdn.discordapp.com/attachments/350561379234873354/813833593084313650/bottle.png" width=100 height=200>
</div>
I'm not absolutely sure what effect you want, but one thing to notice is that you can have the filling and the emptying all in the same animation, without necessarily needing to involve a cubic Bezier function, which in this case seemed to partly fill the bottle, then empty then partly fill but to a different level.
Simplifying things but introducing more detail into the keyframes here's an example of the bottle filling much faster than it empties, by having the percentage of the animation used for filling as much smaller than the emptying.
There are of course many variations on this which can be achieved by having the percentages differ. Also you could reintroduce a cubic Bezier to make the movement less uniform, but that's for your experimentation as I don't know exactly what final effect is wanted.
<head>
<style>
#bottle, #fill {
/* position: fixed; NOTE. had to change this position fixed to absolute get it to line up on Stack Overflow. Outside SO it was fine as fixed */
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(50% - 50px);
}
.box {
width: 96px;
height: 195px;
border-radius: 10px;
text-align: center;
color: #ddd;
font-size: 25px;
font-weight: 600;
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
}
.box:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: #00acee;
left: 50%;
transform: translateX(-50%);
border-radius: 40%;
/* animation: fill 20s cubic-bezier(0, 1.62, 0.27, -0.67) infinite; */
animation: fill 20s linear infinite;
z-index: -1;
animation-fill-mode: forwards; /* added */
}
#keyframes fill {
0% {
top: 250px;
transform: translateX(-50%) rotate(0deg);
}
10% {
top: -50px;
top: 75px;
transform: translateX(-50%) rotate(360deg);
}
20% {
top: 75px;
transform: translateX(-50%) rotate(0deg);
}
22% {
top: 75px;
transform: translateX(-50%) rotate(0deg);
}
80% {
transform: translateX(-50%) rotate(360deg);
}
100% {
top: 250px;
transform: translateX(-50%) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="box">
<img id="bottle" src="https://cdn.discordapp.com/attachments/350561379234873354/813833593084313650/bottle.png" width=100 height=200>
</div>
</body>
Note: in the SO snippet system the position fixed had the effect of separating the blob (liquid) from the bottle - it was fine when the code was just run as it was outside the SO system. To demo it here I have made the bottle position absolute and centered the bottle and blob, just so you can get an idea while here. You can remove the absolute and go back to fixed outside SO.
I wanted to create a div which has a background image and a transparent background color over it with some text. When hover, the transparent background color should slide out towards the bottom of the div as shown in the image:
https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
Left block is default. Right block is hover state.
I modified this snippet: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I modified the provided style to:
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container .overlay {
opacity: 0.75;
}
.container:hover .overlay {
opacity: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
Edited:
My Problem
I tried to achieve a simple slideout animation on my as shown in the image I provided. See this: https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
I have tried something like this - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I edited the css they provided to the css I provided above.
Please see the image I provided. I wanted to achieve that.
Try this.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
transition: .5s ease;
height: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Hope this code may help you.
Hi hope this is what you are looking for
Try this fiddle
.container:hover .overlay {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
opacity: 1 !important;
}
hope this is what you are looking
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;}
http://jsfiddle.net/jxgrtmvy
Can someone explain why does the image slide back nicely and the text disappears right away when you hover out?
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#image {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper:hover #image {
transition: 1s;
left: -100px;
}
.wrapper:hover .text {
transition: 1s;
left: 50%;
}
.text {
white-space: nowrap;
//color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 150%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="wrapper">
<img id="image" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
<div class="text">text</div>
</div>
So what I want is that the text also slides out nicely on hover out and not just disappear.
You also need to add the transition property to the .text:
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#image {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper:hover #image {
transition: 1s;
left: -100px;
}
.wrapper:hover .text {
transition: 1s;
left: 50%;
}
.text {
white-space: nowrap;
//color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 150%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: 1s;
}
<div class="wrapper">
<img id="image" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" alt="">
<div class="text">text</div>
</div>
I tried to split this code from :
.card-container:hover .sides {
transform: rotateY(180deg);
}
to this :
.card-container:hover {
transform: rotateY(180deg);
}
.sides {
transform: rotateY(180deg);
}
and it doesn't work.
It's for a card flip without clicking on it (and no js)
Here the full code :
HTML :
<div class="card-container" >
<div class="sides">
<div class="front"> NIKE </div>
<div class="back"> TA RACE</div>
</div>
</div>
CSS :
.card-container {
margin-top: 2rem;
margin-right: auto;
margin-bottom: 2rem;
margin-left: auto;
max-width: 320px;
perspective: 100;
width: 320px;
height: 480px;
}
.card-container:hover .sides {
transform: rotateY(180deg);
}
.sides {
position: relative;
transform-style: preserve-3d;
transition: .6s;
}
.front {
width: 320px;
height: 480px;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
z-index: 2;
background-color: yellow;
background-size: 100% 100%;
transform: rotateY(0deg);
}
.back {
width: 320px;
height: 480px;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
background-color: green;
background-size: 100% 100%;
transform: rotateY(180deg);
}
Is it possible to use CSS transitions to animate something between a position set as left: 0px to right: 0px so it goes all the way across the screen? I need to accomplish the same thing with top to bottom. Am I stuck calculating the screen width / object-size?
#nav {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
-webkit-transition: all 0.5s ease-out;
}
.moveto {
top: 0px;
right: 0px;
}
and then I use jQuery's .addClass
You can animate the position (top, bottom, left, right) and then subtract the element's width or height through a CSS transformation.
Consider:
$('.animate').on('click', function(){
$(this).toggleClass("move");
})
.animate {
height: 100px;
width: 100px;
background-color: #c00;
transition: all 1s ease;
position: absolute;
cursor: pointer;
font: 13px/100px sans-serif;
color: white;
text-align: center;
}
/* ↓ just to position things */
.animate.left { left: 0; top: 50%; margin-top: -100px;}
.animate.right { right: 0; top: 50%; }
.animate.top { top: 0; left: 50%; }
.animate.bottom { bottom: 0; left: 50%; margin-left: -100px;}
.animate.left.move {
left: 100%;
transform: translate(-100%, 0);
}
.animate.right.move {
right: 100%;
transform: translate(100%, 0);
}
.animate.top.move {
top: 100%;
transform: translate(0, -100%);
}
.animate.bottom.move {
bottom: 100%;
transform: translate(0, 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click to animate
<div class="animate left">left</div>
<div class="animate top">top</div>
<div class="animate bottom">bottom</div>
<div class="animate right">right</div>
And then animate depending on the position...
For elements with dynamic width it's possible to use transform: translateX(-100%); to counter the horizontal percentage value. This leads to two possible solutions:
1. Option: moving the element in the entire viewport:
Transition from:
transform: translateX(0);
to
transform: translateX(calc(100vw - 100%));
#viewportPendulum {
position: fixed;
left: 0;
top: 0;
animation: 2s ease-in-out infinite alternate swingViewport;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
#keyframes swingViewport {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100vw - 100%));
}
}
<div id="viewportPendulum">Viewport</div>
2. Option: moving the element in the parent container:
Transition from:
transform: translateX(0);
left: 0;
to
left: 100%;
transform: translateX(-100%);
#parentPendulum {
position: relative;
display: inline-block;
animation: 2s ease-in-out infinite alternate swingParent;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
#keyframes swingParent {
from {
transform: translateX(0);
left: 0;
}
to {
left: 100%;
transform: translateX(-100%);
}
}
.wrapper {
padding: 2rem 0;
margin: 2rem 15%;
background: #eee;
}
<div class="wrapper">
<div id="parentPendulum">Parent</div>
</div>
Demo on Codepen
Note: This approach can easily be extended to work for vertical positioning. Visit example here.
This worked for me on Chromium. The % for translate is in reference to the size of the bounding box of the element it is applied to so it perfectly gets the element to the lower right edge while not having to switch which property is used to specify it's location.
topleft {
top: 0%;
left: 0%;
}
bottomright {
top: 100%;
left: 100%;
-webkit-transform: translate(-100%,-100%);
}
In more modern browsers (including IE 10+) you can now use calc():
.moveto {
top: 0px;
left: calc(100% - 50px);
}