I did a mobile navigation, what appears on the left when the user opens it. The navigation is fixed and it pushes the content to the right. I added overflow:hidden for body, and it removes the scrollbar on desktop but not on ios.
Style:
body{
padding:0;
margin:0;
overflow:hidden;
}
.opened-navigation#navigation {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
#navigation {
width:240px;
position:fixed;
left:0;
top:0;
height:100%;
background:yellow;
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.opened-navigation#content {
-webkit-transform: translate(240px, 0);
-moz-transform: translate(240px, 0);
transform: translate(240px, 0);
}
#content {
background:red;
}
HTML
<div id="navigation">Nav</div>
<div id="content">Content
<strong>Open Navigation</strong>
</div>
Javascript
$(document).ready(function(){
$('#opennav').click(function(e){
e.preventDefault();
$('#navigation, #content').toggleClass('opened-navigation');
});
});
When I add overflow:hidden for html it works, but on desktop it crops some of my elements. What is the solution?
Online version: http://psd-labs.com/demo/
I added position:relative; to body. I don't know why, but it fixed the problem.
Related
I'm trying to set up a fixed div to the left of a page, 24px from the left and stretching from top to bottom of the page. Inside this div will be navigation and a title. I'm trying to get the title rotated -90 degrees and centered positioned toward the bottom of the div.
Having a tough time figuring this out. Looked around a lot of places and not seeing a similar example. I've set up a fiddle with the current code: https://jsfiddle.net/xkLc9xuy/2/
HTML:
<div>
<article></article>
<footer></footer>
<header></header>
<nav data-secondary></nav>
<nav data-primary>
<div>Website Title</div>
</nav>
</div>
SCSS:
#mixin -position($position:relative, $top:0, $right:0, $bottom:0, $left:0) {
position: $position;
#if $position !=relative {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
}
#mixin -transform($transform) {
-ms-transform: $transform;
-webkit-transform: $transform;
transform: $transform;
}
#mixin -transform-origin($origin) {
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
body{
*:not(script){
margin:0;
padding:0;
#include -position;
}
> div{
#include -position(absolute);
}
}
nav[data-primary]{
box-shadow:0 0 8px rgba(0,0,0,0.5);
width:40px;
#include -position(absolute, 0, auto, 0, 24px);
> div{
white-space:nowrap;
height:40px;
line-height:40px;
background-color:red;
#include -transform(rotate(-90deg));
#include -transform-origin(left bottom);
}
}
You may also take a look at writing-mode:
-webkit-writing-mode: vertical-lr;
/* old Win safari */
writing-mode: vertical-rl;/*FF*/
writing-mode: tb-lr;
/* writing-mode:sideways-lr;
or eventually scale(-1,-1) untill sideways-lr is working everywhere */
transform: scale(-1, -1);
https://jsfiddle.net/xkLc9xuy/20/
I am having a bit of an issue with rotation of a cube. I want to make it cross-browser so I am transforming every side of the cube. When I am rotating from left to right the sides align perfectly on all browsers Chrome, Firefox and IE, BUT when the cube is rotated from top to bottom, the sides align only on Chrome (If I make the animation slower on Chrome the sides are broken the same way as the other browsers, so I think working properly is a bug :D). I have provided an example on jsfiddle:
http://jsfiddle.net/0n9bnxe5/
HTML:
<div class="flip-card-content">
<div class="flip-card-side-a" style="background:red">
FRONT
</div>
<div class="flip-card-side-b" style="background:green">
BACK
</div>
<div class="flip-card-side-c" style="background:aqua">
LEFT
</div>
</div>
<button id="button">Flip-top</button>
<button id="button2">Filp-right</button>
CSS:
.flip-card-content {
position: relative;
margin: 100px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
perspective:1000px;
}
.flip-card-side-a,
.flip-card-side-b,
.flip-card-side-c{
width: 100%;
position: absolute;
height: 100%;
backface-visibility: hidden;
transform-origin:50% 50% 0px;
transition: all .5s ease-in-out;
}
.flip-card-side-a {
transform: rotateY(0deg) translateZ(100px);
z-index: 1;
}
.flip-card-side-b {
transform: rotateX(90deg) translateZ(100px);
}
.flip-card-side-c {
transform: rotateY(-90deg) translateZ(100px);
}
.flip .flip-card-side-a {
transform: rotateX(-90deg) translateZ(100px);
}
.flip .flip-card-side-b {
display:block;
transform: rotateY(0deg) translateZ(100px);
z-index: 1;
}
.flip-right .flip-card-side-a {
transform: rotateY(90deg) translateZ(100px);
}
.flip-
right .flip-card-side-b {
display:none;
}
.flip-right .flip-card-side-c {
transform: rotateY(0deg) translateZ(100px);
z-index:1;
}
JQUERY:
$("#button").on('click', function(){
$(".flip-card-content").removeClass("flip-right");
setTimeout(function(){
$(".flip-card-content").toggleClass("flip");
},500);
});
$("#button2").on('click', function(){
$(".flip-card-content").removeClass("flip");
setTimeout(function(){
$(".flip-card-content").toggleClass("flip-right");
},500);
});
Any advice is welcomed!
Your translateZ doesn't quite work in the way you expect. Have look at how I've positioned the faces on the cube here and compare it to your own. Ultimately, I find the easiest way to rotate items such as cubes etc. is to position all the elements and then just rotate the container.
Also for nice scaling of fonts, images etc. its preferable to leave the front face at its natural size rather than scale up (i.e. move everything backward in 3d space):
.box {
height: 100%;
position: relative;
transform: rotateX(0deg);
transform-origin: 50% 50% -100px;
transform-style: preserve-3d;
transition: all 1s;
width: 100%;
}
.box--rotate-top {
transform: rotateX(-90deg);
}
.box--rotate-left {
transform: rotateY(90deg);
}
.box__face {
backface-visibility: hidden;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.box__face--front {
background: #f90;
}
.box__face--top {
background: #369;
transform: rotateX(90deg) translateZ(200px);
transform-origin: 0 100% 0;
}
.box__face--left {
background: #867;
transform: rotateY(-90deg) translateZ(200px);
transform-origin: 100% 0 0;
}
Here is the fiddle.
Transition in 3d space are tricky, and different browsers can handle them differently.
Here you have your fiddle corrected.
Your best bet is to leave nothing to the browser imagination
so, instead of changing
transform: rotateY(0deg) translateZ(100px);
to
transform: rotateX(-90deg) translateZ(100px);
make the change happen from
transform: rotateX(0deg) rotateY(0deg) translateZ(100px);
to
transform: rotateX(-90deg) rotateY(0deg) translateZ(100px);
Notice that I didn't change the transform from a mathematical point of view; but now every property matches a similar one.
Note just in case you want to know, in the first case IE is making the followng transition: change the angle of rotation from 0 to -90deg. At the same time, change the axis of rotation from Y to X. So, at the middle of the transition, the rotation is wrong (from your point of view), but in a mathematic sense, both ways of understanding the transition make sense.
I have tried to do an hover animation which brings the info from bottom to center, the problem is that the div position point starts too much from the bootom and it cause that the top and center area don't trigger the hover animation, only the bottom area triggered it. how can i fix the position of the div and still keep the animation from bottom?
here is the fiddle link: js fiddle link
the main issue is in this div:
.movie_thumb_wrapper .text-content {
color: white;
cursor: pointer;
display: table;
opacity: 0;
transition: all 0.5s ease;
transform: translate(0,-150px);
-webkit-transform: translate(0,100px);
-o-transform: translate(0,-50px);
-moz-transform: translate(0,-50px);
}
user agent stylesheetdiv {
display: block;
}
Change the selector
.movie_thumb_wrapper .text-content:hover
to
.movie_thumb_wrapper:hover .text-content
So that the transition takes place when hovering over the parent element instead:
Updated Example
.movie_thumb_wrapper:hover .text-content {
opacity: 1;
transform: translate(0, -150px);
-webkit-transform: translate(0, 0px);
-o-transform: translate(0, -50px);
-moz-transform: translate(0, -50px);
}
Problem
I'm trying to make a layer appear like it's a wall falling down, revealing the layer behind it. I've setup two fixed div positions. The "Wall" div has a z-index of 9999, the "Background" div has a z-index of 0;
In Webkit browsers (Safari/IOS) that I've tested, it seems like once the animation starts on the "wall", the z-indexes are lost or ignored, causing the "wall" layer to abruptly disappear behind the background div.
Any ideas on how to preserve the z-indexes of the layers? Thanks in advance!
Example Code
(note: jsFiddle at the bottom)
HTML Code
<div id="wall">
This is the wall
</div>
<div id="background">
This is the background
</div>
<button id="start" style="float: right;">
Flip Down
</button>
Some javascript to enable the button
$('#start').click(function(){
alert('Should Fall Down like a wall, revealing the background');
$('#wall').addClass('animated flipDown');
});
CSS Code (cribbed from animate.css)
#wall{
background-color: #F00;
width: 100px;
height: 100px;
position:fixed;
top:0;
left:0;
z-index: 9999;
}
#background{
background-color: #00F;
width: 100px;
height: 100px;
position:fixed;
top:0;
left:0;
z-index: 0;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*** flipDown ***/
#-webkit-keyframes flipDown {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
-webkit-transform-style: flat;
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
-webkit-transform-style: flat;
opacity: 1;
}
}
#keyframes flipDown {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipDown {
-webkit-animation-name: flipDown;
animation-name: flipDown;
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
}
jsFiddle
http://jsfiddle.net/3mHe2/2/
Check out the differences in Safari vs Chrome.
My rotating element wasn't suitable to have a neighbour to the background, but I fixed it by applying
transform: translateZ(1000px);
transform-style: preserve-3d;
to the parent of the rotating element. Safari now thinks it's 1000px infront of the background.
Found a solution. Hopefully this helps someone in the future.
It turns out that there is a "bug" in the safari versions of webkit. When a 3d css animation is playing, the original z-indexes are lost. Instead, it seems like the animating pieces are put into a separate z-index "group" that is separate from the rest of the z-indexes of the DOM.
The solution is to join the backdrop div and the wall div into the same z-index group by wrapping it in a div with a webkit-transform that doesn't change anything. That causes the backdrop and wall to be children of the wrapper div and the z-indexing of the respective children are preserved.
<div id="wrapper" style="-webkit-transform: translate3d(0px, 0px, 0px);">
<div id="wall">
This is the wall
</div>
<div id="background">
This is the background
</div>
</div>
I believe it is the same or similar issue to this:
css z-index lost after webkit transform translate3d
I ran into this issue and nothing would fix it until i added perspective to the parent container of the item that should be behind.
.wrap{
perspective: 1000px;
}
In my case I was able to solve the issue by applying translateZ to the parent and translate scale to the child.
.parent {
transform: translateZ(22px);
}
.child {
transform: scale(0.955);
}
I'm trying to create a ring like the one below:
There will be 5 or six on the page, each with a different level of the orange section going around the ring.
eg. 2 may have 50%, 1 has 30%, 1 has 80%, 1 40%
I can get the orange to be either 25%, 50%, 75%, 100% by following this:
<div class="wrapper">
<div class="arc arc_start"></div>
<div class="arc arc_end"></div>
</div>
.wrapper {
position:relative;
margin:20px;
}
.arc {
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
border-radius:100%;
border:1px solid;
}
.arc_start {
border-color:transparent red red red;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.arc_end {
border-color:red red red transparent;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
from this jsfiddle
As its just adding colour to the border of the elements, but this doesn't really help me achieve my goal.
I could probably do this is canvas, but wanted to see if possible not using canvas.
Thanks in advance,
Tom
It seems to me that you almost have your answer.
You could use pseudo-element and rotate to hide/show portion of borders to draw in between 0,25,50,75 and 100% overlapping borders by borders.
http://codepen.io/gcyrillus/pen/JzmiE
div {
height:200px;
width:200px;
border:solid 5px black;
background:#159;
border-radius:100%;
display:inline-block;
margin:1em;
position:relative;
text-align:center;
line-height:200px;
color:white;
font-size:2em;
}
div:before,div:after {
content:'';
position:absolute;
top:-5px;
left:-5px;
border:solid 5px transparent;
height:inherit;
width:inherit;
border-radius:inherit;
}
.c30, .c40, .c50 {
border-left-color:tomato;
border-bottom-color:tomato;
}
.c30:before {
border-left-color:black;
transform:rotate(18deg)
}
.c40:before {
border-bottom-color:tomato;
transform:rotate(54deg)
}
.c80 {
border-color:tomato;
border-right-color:black;
}
.c80:before {
border-left-color:tomato;
transform:rotate(54deg)
}
body {background: #456;}
and html
<div class="c30">c30</div>
<div class="c40">c40</div>
<div class="c50">c50</div>
<div class="c80">c80</div>
<p>i.e. calculate rotation needed : 30%-25% = 5% of 360deg equals 18deg to increase rotation of one border to add those 5.%</p>