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;
Related
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'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
For a new webdesign I'm trying to control two 50% width layers with CSS transitions and z-index, but there seems te be a conflict: the z-index seems to be too slow. As you can see in the fiddle, the white box is hidden behind the right slider div on hover, until the transition is complete. Is there an alternative that works faster? Or is there another way to do it? Any help would be much appreciated!
This is my CSS:
body {
background:black;
}
div {
-webkit-transition:opacity 0.6s ease, width 0.6s ease;
transition:opacity 0.6s ease, width 0.6s ease;
}
.slide {
position:absolute;
top:0;
bottom:0;
width:50%;
-webkit-transform:skew(-15deg);
-moz-transform:skew(-15deg);
-ms-transform:skew(-15deg);
-o-transform:skew(-15deg);
transform:skew(-15deg);
z-index:2;
}
.slide:hover {
width:60%;
z-index:3;
}
.slide#left {
left:0;
}
.slide#right {
right:0;
}
.wrap {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.inner {
width:100%;
height:100%;
-webkit-transform:skew(15deg) scale(1.5);
transform:skew(15deg) scale(1.5);
opacity:0.5;
position:absolute;
}
.inner:hover {
opacity:1;
}
.inner#left {
background:url(//savado.nl/new/key.jpg) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.inner#right {
background:url(//savado.nl/new/code2.jpg) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.slide .logo {
position:absolute;
z-index:99;
top:50%;
height:20%;
padding-left:20%;
background:white;
}
.logo#left {
right:0;
-webkit-transform:translateX(50%) translateY(-50%) skew(15deg);
-moz-transform:translateX(50%) translateY(-50%) skew(15deg);
-ms-transform:translateX(50%) translateY(-50%) skew(15deg);
-o-transform:translateX(50%) translateY(-50%) skew(15deg);
transform:translateX(50%) translateY(-50%) skew(15deg);
}
.logo#right {
left:0;
-webkit-transform:translateX(-50%) translateY(-50%) skew(15deg);
-moz-transform:translateX(-50%) translateY(-50%) skew(15deg);
-ms-transform:translateX(-50%) translateY(-50%) skew(15deg);
-o-transform:translateX(-50%) translateY(-50%) skew(15deg);
transform:translateX(-50%) translateY(-50%) skew(15deg);
}
And here's the fiddle!
PS: I'm new to posting questions of my own on this forum, so I'm sorry if I disobey any of the rules. Besides that, my English is not the best, since it's not my native language (I'm Dutch). But please help me out!
Looks Like the problem was only in Chrome but not in FF. What you need to do is set a smaller z-index on the wrapper container like this
.wrap {
z-index:1;
}
That should fix it and here is the updated JSFIDDLE
Add z-index in your transition declaration. This should stop the z-index from executing before the transition
-webkit-transition:opacity 0.6s ease, width 0.6s ease,z-index 0.6s;
transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s;
I need to implement a "room" 3d rotation on some elements; to achieve it transform: translateX(-100%) rotateY(90deg) and its opposite transition are used. It works fine in Chrome, but in Firefox (up to the version 34) the elements flicker during the transition. They can do so just for a moment, having gone half the way, or disappear completely.
What I have noticed: if the perspective CSS value on the parent is higher than the computed width of the elements in question - the transition goes well. If the perspective is really a culprit, then I don't understand the nature of such behaviour; the specs say, an element isn't drawn if Z-axis value of all its points is lower than the perspective value. And mine should definitely be visible at least partially during the transition.
It should be noted, that only rotateY seems buggy - not the rorateX.
Here are the code samples. The html:
<div class="cont">
<div id="bg-club" class="background club"></div>
<div id="bg-cafe" class="background cafe active"></div>
<div id="bg-fitness" class="background fitness"></div>
<div id="bg-resto" class="background resto"></div>
<div id="bg-lady" class="background lady"></div>
</div>
The CSS (for the sake of convenience the prefixed rules are removed):
.cont{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
overflow:hidden;
perspective:1000px;
transform-style:preserve-3d;
}
.background.active{
visibility:visible;
z-index:1;
}
.background{
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
z-index:10;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
visibility:hidden;
overflow:hidden;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.background.cafe{background-color:#987071;}
.background.club{background-color:#a3367f}
.background.fitness{background-color:#79728b;}
.background.lady{background-color:#a6160e;}
.background.resto{background-color:#712912;}
.rotateRoomLeftOut {
transform-origin: 100% 50%;
animation: rotateRoomLeftOut 4s both ease;
}
.rotateRoomLeftIn {
transform-origin: 0% 50%;
animation: rotateRoomLeftIn 4s both ease;
}
#keyframes rotateRoomLeftOut {
to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}
#keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
And here is the fiddle. By pressing 1-5 yellow boxes we activate the corresponging background animation. The perspective here is 1000px, so the undesired effect can be achieved by resizing the window.
The other example is this great set of page 3D transitions. Just navigate to Rotate->Room->Room to Left or Right.
Edit
Seems that Firefox makes only those elements flicker, whose corresponding dimension (either width for RotateY or height for rotateX) is greater than the parent's perspective. I haven't yet figured out, why that happens, but the simplest and the most straightforward solution so far is setting the aforementioned perspective greater than the element's dimension. In my case, it would be 100vw (or 100vmax to cover both rotate dimensions) for FF 19+ or some other way.
The updated snippet :
$(document).ready(function(){
var generalEvtAffix = '.hotdot', bodyEl = $('body'), pageContents = $('.sidebar, .center-block'),
tabsSel = $('.areas [data-toggle="tab"]');
// Анимация фонов на главной
var bgs = $('.background');
$('.areas [data-toggle="tab"]').on('click'+generalEvtAffix, function(event){
event.preventDefault();
var thisLink = $(this);
/* Если уже активен или анимация всё ещё не закончена, ничего не делаем */
if(thisLink.parent().hasClass('active') || bgs.hasClass('animated'))
return;
var bg = $('#bg-'+this.getAttribute('data-bg')),
bgActive = $('.background.active');
/* Случайным образом определяем направление анимации. */
var animationDirs = ["Left"/* , "Top", "Right", "Bottom" */],
animationDirection = animationDirs[Math.floor(Math.random() * (animationDirs.length) + 0)];
/* - отключаем клик по ссылке на направлении - чтобы временно заблокировать переключение вкладок */
tabsSel.on('click'+generalEvtAffix+'.clicked', function(e){
e.preventDefault();
return false;
});
bgActive.addClass('animated rotateRoom'+animationDirection+'Out')
.on('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click', function(){
/* По окончании анимации "Прочь" прошлого активного элемента скрываем его */
$(this).removeClass('animated active rotateRoom'+animationDirection+'Out')
.off('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click');
});
bg.addClass('animated active rotateRoom'+animationDirection+'In')
.on('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click', function(event){
/* По окончании анимации обратно включаем клик. */
console.log(event);
$(this).removeClass('animated rotateRoom'+animationDirection+'In')
.off('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click');;
tabsSel.off('click'+generalEvtAffix+'.clicked');
});
});
});
.cont{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
overflow:hidden;
-webkit-perspective:1000px;
-moz-perspective:1000px;
perspective:1000px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#-moz-document url-prefix(){
.cont{
perspective:100vw;
}
}
.background.active{
visibility:visible;
z-index:1;
}
.background{
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
z-index:10;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
visibility:hidden;
overflow:hidden;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.background.cafe{
background-color:#987071;
}
.background.club{
background-color:#a3367f
}
.background.fitness{
background-color:#79728b;
}
.background.lady{
background-color:#a6160e;
}
.background.resto{
background-color:#712912;
}
/* Классы анимации фона типа "Room" */
.rotateRoomLeftOut {
-webkit-transform-origin: 100% 50%;
-webkit-animation: rotateRoomLeftOut 4s both ease;
-moz-transform-origin: 100% 50%;
-moz-animation: rotateRoomLeftOut 4s both ease;
transform-origin: 100% 50%;
animation: rotateRoomLeftOut 4s both ease;
}
.rotateRoomLeftIn {
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRoomLeftIn 4s both ease;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRoomLeftIn 4s both ease;
transform-origin: 0% 50%;
animation: rotateRoomLeftIn 4s both ease;
}
/* Описание анимаций */
#-webkit-keyframes rotateRoomLeftOut {
to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
#-moz-keyframes rotateRoomLeftOut {
to { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); }
}
#keyframes rotateRoomLeftOut {
to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}
#-webkit-keyframes rotateRoomLeftIn {
from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
#-moz-keyframes rotateRoomLeftIn {
from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
#keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
.areas{
list-style:none;
position:relative;z-index:1000;
}
.areas li a{
display:block;
width:20px;
height:20px;
background:yellow;
margin:5px;
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div id="bg-club" class="background club"></div>
<div id="bg-cafe" class="background cafe active"></div>
<div id="bg-fitness" class="background fitness"></div>
<div id="bg-resto" class="background resto"></div>
<div id="bg-lady" class="background lady"></div>
</div>
<ul class="areas text-center content-section">
<li>1
</li><li class="active">2
</li><li>3
</li><li>4
</li><li>5
</li>
</ul>
Still looking forward for a reason behind this behavior.
I believe the reason it is flickering is because Mozilla is detecting the object as out of view.
if your perspective is 1000px, and something with a width of 1100px rotates, then the edge of the element will pass behind you and out of view, which mozilla may determine as "do not render"
the only solution I can offer for a consistent view is to set perspective to something like 100vw to make sure your perspective is always as far as your screen is wide
First time poster, fairly new to web design. My design has an image that when hovered, displays images on the left, top and right through css3 transforms.
These images pop out great when hovered and I would like to hover over the new images so I might click on them as links.
This seems to work great in IE10 and Firefox but fails somewhat in WebKit browsers. The issue I am seeing is that when hovering over the newly translated divs, the transition will flicker somewhat and then at random points in the div return to its original state.
As I said this works fine in Firefox and IE10, I am able to hover over the new divs and click on them with no issue. With WebKit, sometimes I will be able to click on the div and sometimes I will only be able to scroll halfway into the div before it retracts.
Relevant code is posted below:
<div id="logo">
<img id="mainLogo" src="Images/logo.png" style="width:320px;" />
<div id="div1">
<img src="Images/box1.png" style="width:320px" />
</div>
<div id="div2">
<img src="Images/box3.png" style="width:320px" />
</div>
<div id="div3">
<img src="Images/box2.png" style="width:320px" />
</div>
</div>
#logo
{
width:320px;
position:relative;
margin:0 auto;
margin-top:300px;
}
#div1
{
top:100px;
left:-200px;
background-repeat:no-repeat;
width:320px;
height:200px;
position:absolute;
transform:rotatey(270deg);
-webkit-transform:rotatey(270deg);
-moz-transform:rotatey(90deg);
transition:transform 0.5s;
-webkit-transition:-webkit-transform 0.5s;
-moz-transition:-moz-transform 0.5s;
}
#div2
{
top:100px;
left:200px;
background-repeat:no-repeat;
width:320px;
height:200px;
position:absolute;
transform:rotatey(270deg);
-webkit-transform:rotatey(270deg);
-moz-transform:rotatey(90deg);
transition:transform 0.5s;
-webkit-transition:-webkit-transform 0.5s;
-moz-transition:-moz-transform 0.5s;
}
#div3
{
top:-100px;
left:0px;
background-repeat:no-repeat;
width:320px;
height:200px;
position:absolute;
transform:rotatex(90deg);
-webkit-transform:rotatex(90deg);
-moz-transform:rotatex(90deg);
transition:transform 0.5s;
-webkit-transition:-webkit-transform 0.5s;
-moz-transition:-moz-transform 0.5s;
}
#logo:hover #div1
{
transform:translate(-120px,0) rotatey(180deg);
-webkit-transform: translate(-120px,0) rotatey(180deg);
-moz-transform:translate(-120px,0) rotatey(180deg);
}
#logo:hover #div2
{
transform:translate(110px,0) rotatey(180deg);
-webkit-transform: translate(110px,0) rotatey(180deg);
-moz-transform:translate(110px,0) rotatey(180deg);
}
#logo:hover #div3
{
transform:translate(0,-60px) rotatex(180deg);
-webkit-transform: translate(0,-60px) rotatex(180deg);
-moz-transform:translate(0,-60px) rotatex(180deg);
}
JSFiddle