Despite the usage of a '-webkit-transform', and 'perspective:800px' on the parent, my div.container with a 'translateZ' is in a good position on Chrome but is 100px closer to me on Safari.
Do you have any idea about what could the problem be?
#bigContainer .container{
transform-style: preserve-3d;
-webkit-transform: translateZ(110px) rotateY(0deg) rotateX(0deg) scale(0.3);
transform: translateZ(110px) rotateY(0deg) rotateX(0deg) scale(0.3);
}
<div id="bigContainer">
<div class="container">
<div id="shape-1">
<div class="element-1"></div>
</div>
</div>
</div>
Thanks,
Eric
Related
I am using owl carousel spotlight with scale effect.
The overflow:hidden for the outer div is not working in IE11 during the scale transition
.spotlight{
border: 1px solid red;
height: 200px;
overflow: hidden;
}
img{
transition: all ease 2s;
-ms-transform: scale(1);
transform: scale(1);
}
.active img{
-ms-transform: scale(1.5);
transform: scale(1.5);
}
<div class="spotlight">
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="item"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="item"><img src="https://placeimg.com/640/480/any" alt=""></div>
</div>
</div>
<script>
$(function(){
$('.owl-carousel').owlCarousel({
loop:true,
autoplay: true,
items: 1,
margin:10,
nav:true,
animateOut: 'fadeOut'
});
})
</script>
Fiddle - https://jsfiddle.net/jt2wLx6v/7/
IE11 has a lot of issues and this is one of them. here is a link to an already answered similar question that could help you. Let me know
Overflow property not working in IE 11
I'm looking into CSS transforms and I cant get this one part to work.
#photo-container img {
transition: transform 2s, transform-origin 2s;
}
#container-1 img:hover {
transform: rotate(45deg);
transform-origin: 0 0;
}
#container-2 img:hover {
transform: rotate(1.5turn);
transform-origin: 50%, 50%;
}
#container-3 img:hover {
transform: scale(1.5);
transform-origin: 0 0;
}
<div class="photo-container" id="container-1">
<div class="photo">
<img src="http://placehold.it/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
The three classes HTML elements are the same as the one posted below.
My question is that say I change the transform origin to 0 0, and it has a transform set to rotate, when the rotate occurs and finishes, instead of returning to its original position the same way it did to get there, it recenters itself, then goes to that point that was specified in the rotate function and does it from there.
Is there something I missed here or is this the normal functionality?
Edit. i stuffed something up. sorry to bother
Try to add transform-origin to images without hover. And change #photo-container to .photo-container I can't see another problem with it.
.photo-container {
display: inline-block;
}
.photo-container img {
transition: transform 2s, transform-origin 2s;
transform-origin: 0 0;
}
#container-1 img:hover {
transform: rotate(45deg);
}
#container-2 img:hover {
transform: rotate(1.5turn);
}
#container-3 img:hover {
transform: scale(1.5);
}
<div class="photo-container" id="container-1">
<div class="photo">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
<div class="photo-container" id="container-2">
<div class="photo">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
<div class="photo-container" id="container-3">
<div class="photo">
<img src="http://via.placeholder.com/100x100" alt="">
<div class="grey"></div>
epicface
</div>
</div>
I have the following CSS:
.element{
position:relative;
transition:all 1s;
-webkit-transform: rotateX(1deg) rotateZ(1deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
}
.spun{
.element{
top:260px;
-webkit-transform: rotateX(45deg) rotateZ(45deg) rotateY(0deg);
}
}
and HTML
<div class="element" id="element-1">
<div class="graphic-wrap">
Text 1
</div>
</div>
<div class="element" id="element-2">
<div class="graphic-wrap">
Text 2
</div>
</div>
<div class="element" id="element-3">
<div class="graphic-wrap">
Text 3
</div>
</div>
When I add a class of spun to the body, everything jumps before moving into position. You can see it actually goes off the screen, even though if you compare the position of where it starts, and where it ends, they are really similar:
Demo: http://codepen.io/EightArmsHQ/pen/dadff4f8e9f63e9f825693865d1c9354
If, however I don't add the spun class, and instead gradually increment the values in developer tools, it gradually moves how I want it to.
How can I prevent everything from jumping?
This is because the .element doest have an initial top position so there is no state for it to transform from.
Simply give the .element a starting position. Eg:
$('body').click(function(){
$(this).toggleClass('spun');
})
.element {
top: 0px;
position: relative;
transition: all 1s;
transform: rotateX(1deg) rotateZ(1deg) rotateY(0deg);
transform-style: preserve-3d;
transform-origin: 50% 50%;
}
.spun .element {
top: 260px;
transform: rotateX(45deg) rotateZ(45deg) rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element" id="element-1">
<div class="graphic-wrap">
Text 1
</div>
</div>
<div class="element" id="element-2">
<div class="graphic-wrap">
Text 2
</div>
</div>
<div class="element" id="element-3">
<div class="graphic-wrap">
Text 3
</div>
</div>
I have a component that needs to slide in from left with an animation. But I need the same component to disappear instantly. But with the following code, the component comes in with the animation I want, but takes 2 seconds to disappear. How should I change this, so the component would disappear instantly?
#keyframes slide-in {
from {left: -350px;}
to {left: 0;}
}
.how {
position: relative;
animation-name: slide-in;
animation-duration: 2s;
}
for the component to disappear, I am using an ng-if (AngularJS).
<div class="m-b col-md-6 how">
<p ng-if="active==1;" class="how"> First </p>
<p ng-if="active==2;" class="how"> Second </p>
<p ng-if="active==3;" class="how"> Third </p>
<p ng-if="active==4;" class="how"> Forth</p>
</div>
And here is the code that actually modifies the value of active:
<div class="m-b col-md-6">
<div class="m-b">
<butto ng-click="active=1;"> Step 1</button>
</div>
<div class="m-b">
<button ng-click="active=2;">Step 2</button>
</div>
<div class="m-b">
<button ng-click="active=3;">Step 3</button>
</div>
<div class="m-b">
<button ng-click="active=4;">Step 4</button>
</div>
</div>
So the component does disappear with the code above, but it takes 2 seconds for it to disappear!
To make an element visually disappear, you can set the opacity to 0. The element will still occupy space on the page.
JSFiddle
#keyframes slide-in {
0% {left: -350px; opacity: 1;}
99% {left: 0; opacity: 1;}
100% {left: 0; opacity: 0;}
}
.how {
opacity: 0;
position: relative;
animation-name: slide-in;
animation-duration: 2s;
}
I have a div tag contain an image child which is transformed using "perspective(1000px) rotateX(45deg)". Is there a way to get the top, left position of the image child after transformation done by the browser?
<div id="parent">
<div id="child" style="transform: perspective(1000px) rotateX(45deg)">
<img src="<path>" style="position:absolute; top:10px;left:10px"/>
</div>
</div>
Is it possible to use getComputedStyle()["transform"] matrix3D values to transform (10,10), if so how?
Thanks in advance
--Hari
Try this Code.
<div style="-webkit-perspective: 800; perspective: 800; margin: 50px 0 50px 50px">
<iframe src="http://www.abmuku.com/wp-content/uploads/2012/04/google-logo-small.jpg" style="-webkit-transform: rotate3d(0, 1, 1, 30deg); transform: rotate3d(0, 1, 1, 30deg); border:0;"></iframe>
</div>