I'd like to implement a "funny" Navigation into my website, with perspective and stuff, but, as a beginner, I look at a brick-wall.
I just don't find a way to get the line backface-visibility: hidden; working.
My goal is:
Front:
Back:
The result with the code below is (in rotation-state):
There are plenty of working sample-codes on CodePen, and I tried to figure it out without success. Weird things happened, but never did the backface-visibility of an object get its hidden-state.
I used a great template to work on (designmodo.com) and trimmed it down to this:
HTML
<body>
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
</body>
CSS
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin:-156px 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform:translateZ(10px);
backface-visibility:hidden;
}
.layer-2 {
transform:rotateY(180deg);
}
Please see my pen: https://codepen.io/herrbraun/pen/JKroYa
(the rotation is there only to show the not-working blackface-visibility –– once it works, it'll be interactive)
If somebody could have an eye on what I've got so far, I don't see any typos or syntax-errors, but – what makes the CSS "fail"?
First of all, you have a syntax error:
.layer-1, layer-2 {
should be
.layer-1, .layer-2 {
Also, for this setup to work, you need to set
.poster {
transform-style: preserve-3D;
}
because you have transforms both in the parent and the child, and you want get the backface style to the combination of both. You had already this on body, but this property doesn't inherit.
Your snippet corrected
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
#keyframes rotating {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
.poster {
animation: rotating 10s linear infinite;
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin: 0 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
transform-style: preserve-3D; /* new */
}
.poster .shine {
position:absolute;
top:0;
left:0;
background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
z-index:100;
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform: translateZ(10px);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .1s;
transition: .1s;
}
.layer-1 {background-color: blue; color:white;}
.layer-2 {
background-color: red;
transform:rotateY(180deg);
}
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
Try setting the animation to .layer-1 and .layer-2 instead of .poster and set the animation-delay of .layer-2 to -5s
Related
If I wanted to Change the width of an element twice and animate that. For example:
box{
height:100px;
width:100px;
}
.box:hover{
width:300px;
width:200px;
}
I think you need keyframes animation. It should works properly in your case.
like this
#keyframes box-size {
0%, 100% {
width: 100px;
}
50% {
width: 300px;
}
}
.box{
height:100px;
width:100px;
background: pink;
}
.box:hover{
animation: box-size 2s;
}
<div class="box"></div>
If you use animation effect before mix-blend-mode property you will not get mix blend mode.
Once you remove the animation class or disable animation, then mix-blend-mode will work.
What is the problem? I spent hours to solve just this simple thing. Please, help
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
animation: spin 2s infinite linear;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
mix blend should take effect anyway
In the old times, adding a transform translateZ(0px) used to solve a lot of problems.
At least in my Chrome, seems to still be the case:
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
transform: translateZ(0px); /* added */
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
animation: spin 2s infinite linear;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
Adding mix-blend-mode to the parent element also, solves the issue.
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
mix-blend-mode:multiply;
}
.box img{ mix-blend-mode:multiply;}
.animate{
border:1px solid red;
border-radius: 1rem;
width:2rem;
height:2rem;
animation: spin 2s infinite linear;
display:flex;
align-items: space-around;
align-content: stretch;
justify-content: space-around;
}
#keyframes spin {
0% { transform: rotate(0deg); background-color: aqua; }
50% { background-color: yellow; }
100% { transform: rotate(1turn); background-color: aqua; }
}
<div class="animate">•</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
In this problem, animate's stack order is between box and img because animate use keyframe.I think keyframe change animate's stack order.So,Img cannot blend in box.We can change element's stack order by using z-index.
Solution is img must within box.We have two options.Results will be different where you use z-index.
First option, we can change animate's stack order in animate class.
`
.animate{
position:relative;
z-index:2;
}
`
Result - animate will be front of box with img.
Second option, we can change box's stack order in box class.
`
.box{
position:relative;
z-index:2;
}
`
Result - box with img will be front of animate.
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
position:relative;
z-index:2;
animation: spin 2s infinite linear;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
I have a div with an inner span with text. This inside span should be centered vertically and horizontally all the time:
http://jsfiddle.net/QW4Wk/
<div>
<span>Text aligned center</span>
</div>
The div has a transition when the mouse is over, which changes its width and height.
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
bottom:0;
right:0;
}
div:hover{
width:250px;
height:250px;
}
However in Chrome (at least) the text looks choppy while the transition is running. I guess this is because the transition goes 1 by 1px and therefor the "center style" has to go back and forward 1px.
Is there someway to fix this to look smoother, something like subpixel?
Thanks.
try this for absolute centering the text..
span {
margin: auto;
color:white;
text-align:center;
height:10px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
and of course lessen your transition speed.
Apply a different change to the span. a transform can be subpixel
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
top:75px;
left:50px;
width: 100px;
transition: -webkit-transform 10s;
-webkit-transform: translate(0px, 0px);
}
div:hover{
width:250px;
height:250px;
}
div:hover span {
-webkit-transform: perspective(999px) translate(25px, 25px);
}
fiddle
I'm learning about CSS3 transitions and struggling with the vendor prefixes. This is just for fun but I'd like to know why the circle expands on hover in Firefox as it's meant to but shrinks in Safari and Chrome. Webkit seems to be ignoring the width and height but border and opacity are fine. The animation in the normal state seems fine too.
I tried changing the .disc:hover width, and tried changing the transition to width instead of all (which seems to work).. it's just all that seems to not be working.
A link to the page:
http://ambigraph.com/sketchbook/expando/
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Expando</title>
<link href="expando.css" rel="stylesheet" type="text/css">
</head>
<body ontouchstart="">
<div class="disc">
</div>
</body>
</html>
The CSS:
#keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
#-webkit-keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
body {
margin: 0 auto;
}
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
It looks like it may be an animation bug since the expando animation is still applied to the element even while hovered. Each browser deals with it differently.
Clearing the animation seems to fix it.
CSS
.disc:hover {
/* ... */
-webkit-animation:none;
animation:none;
}
Firstly you have to differentiate between transition and animation.
The keyframe animation defines the activity that is going on regardless of your input (hover or whatever).
The transition defines what happens when you do something.
To examine the differences between the two states to see what is being transitioned. Remove the duplicates.
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
Essentially, the hover makes the element transparent while increasing the size and changing the border. Since it's transparent, the border really doesn't matter.
I have this snippet implemented:
CSS
div
{
position:absolute;
-webkit-transition: all 0.3s ease-out;
}
.block
{
background:#fc0; /* YELLOW */
top:50px;
left:50px;
width:80px;
height:40px;
-webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,30deg);
}
.block .part
{
background:#444; /* GREY */
width:inherit;
height:inherit;
-webkit-transform: translate3d(0,0,50px);
}
.block:hover .part
{
-webkit-transform: translate3d(10px,10px,20px); /* ONLY TRANSFORMS X & Y */
}
HTML
<div class="block">
<div class="part"></div>
</div>
Check out this Fiddle for the live example.
As you can see, the translation on :hover only affects the .part on the x- and y-axis.
It won't translate in the z-direction.
Anyone who knows what I'm doing wrong?
Got it. Forgot to add -webkit-transform-style: preserve-3d;