I have a working demo. just hover the img and there is the effect I want to have.
http://jsfiddle.net/jxgjhzer/1/
As you can see in css file, I don't use any css animation.
Just using CSS transform, I want my img to achieve same effect without hovering it. It should happen automatically.
So how to zoom-in and zoom-out automatically (without animation if possible)?
Code goes here:
.galleryImg{
height:150px;
width:100%;
transform-origin: 50% 50%;
transition: transform 30s linear;
}
.galleryImg:hover{
transform: scale(2) rotate(0.1deg);
}
that's very simple. you can see DEMO on this link on jsfiddle.net
<div class="cardcontainer">
<img class="galleryImg" src="https://www.google.com/logos/doodles/2014/2014-winter-olympics-5710368030588928-hp.jpg">
</div>
#keyframes zoominoutsinglefeatured {
0% {
transform: scale(1,1);
}
50% {
transform: scale(1.2,1.2);
}
100% {
transform: scale(1,1);
}
}
.cardcontainer img {
animation: zoominoutsinglefeatured 1s infinite ;
}
use animation
.galleryImg{
height:150px;
width:100%;
animation:move 3s infinite ease-in-out;
}
#keyframes move{
0%{
transform: scale(1) rotate(0deg);
}
100%{
transform: scale(2) rotate(0.1deg);
}
}
The below css code will help you out for zoom out effect on hover the particular image. Try this code its very useful to you
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.hover04 figure img {
width: 400px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover04 figure:hover img {
width: 300px;
}
Refer the html code here.
<div class="hover04 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>
I'm new to css transitions and am experimenting with trying to animate the transition between two sub templates that I am including in my angularjs project using ng-include.
I am attempting to replicate the effect seen here (click on the flip option in the dropdown). However I can't seem to get the newly added template to animate its entrance correctly. The leaving template 'flips' out but the entering template just appears rather than 'flipping' in.
My page has the following basic structure:
<div class="content">
<div class="page flip" ng-include="something"></div>
</div>
I am using the following css:
.content {
-webkit-perspective: 600px;
perspective: 600px;
position:relative;
}
.page{
position:absolute;
background:red;
}
.content .page.flip {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.content .page.flip.ng-enter {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.content .page.flip.ng-enter-active {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.content .page.flip.ng-leave {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.content .page.flip.ng-leave-active {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
I've made a plunker by adapting the ng-include demo from angular website here to illustrate problem.
Can anyone point me to where I am going wrong?
I have a problem with a website. I use CSS3 and Transform to rotate the DIV. No problems on all browsers except Iphone and only on the FAQ page, the DIV will not turn!
http://www.bagolf.com/faq
Do you know why I searched for hours, and I do not understand.
<div class="block1_faq_container">
<div class="block1_faq_card">
<div class="front blue">
<h4 class="title">How many clubs may I put in a Bagolf bag?</h4>
</div>
<div class="back face center blue">
<span class="title-148-1-2">There are 15 dividers for 14 clubs and 1 umbrella. Each club has its own divider!</span>
</div>
</div>
</div>
And CSS code :
.block1_faq_container{margin: 10px 0 0; width: 306px; height: 148px; text- align:center;float:left;}
.block1_faq_card,
.block1_faq_card > div{width: inherit;height: inherit;transition: transform 1s; -webkit-transition: all 1s ease-in-out;}
.block1_faq_card > div{line-height: 148px;position: absolute;backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.block1_faq_container:hover .front{transform: perspective(600px) rotateY(180deg); -webkit-transform: perspective(600px) rotateY(180deg);}
.block1_faq_container:hover .back{transform: perspective(600px) rotateY(360deg); -webkit-transform: perspective(600px) rotateY(360deg);}
.title {font-size: 1.9em !important;font-weight: lighter;color:#fff; vertical-align:middle;line-height:1.2em;display:inline-block; padding:10px; }
.title-148-1-2 {font-size: 1.4em !important;font-weight: normal;color:#fff; vertical-align:middle;line-height:1.2em;display:inline-block;padding:10px;}
.front.blue{background-color:#00a0e9;transform: perspective(600px) rotateY(0deg); -webkit-transform: perspective(600px) rotateY(0deg);line-height:148px;}
Thank you very much :)
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
Ok, so here's another IE10 glitch. The problem is that applying perspective on parent elements breaks the backface-visibility hidden setting. Please see this fiddle: http://jsfiddle.net/2y4eA
When you hover over the red square it rotates by 180° on the x-axis, and even though the backface-visibility is set to hidden, the backface is shown, at least until the 180° is reached, then it disappears. Remove the perspective property, and you'll see that it works as expected, the backface isn't visible at all, but ofcourse the 3d effect is lost.
It's possible to workaround this problem by applying perspective in the transform property: http://jsfiddle.net/M2pyb But this will cause problems in cojunction with transform-origin-z, when z is set to anything other than 0, the whole thing becomes "scaled": http://jsfiddle.net/s4ndv so unfortunately that's not a solution.
The backface-visibilty thingy is probaly a bug? If so, is there any workaound other than the one i've mentioned?
I came up against this glitch too and it is definitely a glitch.
The workaround is to apply the perspective transform on the child element. I updated your fiddle here: http://jsfiddle.net/jMe2c/
.item {
backface-visibility: hidden;
transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
transform: perspective(200px) rotateX(180deg);
}
(See also answer at https://stackoverflow.com/a/14507332/2105930)
I think it is because in IE 10, parent element 3d-properties do not propagate to the child element. This is a known unsupported feature. Check out http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:
At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
So the Microsoft-recommended solution is to propagate your 3d properties yourself, manually.
I struggled for hours. this is the only crossbrowser solution that worked for me: http://www.cssplay.co.uk/menu/css3-3d-card.html
A workaround that i would imagine is adding a transition for opacity that has 0 timing and has a delay of half of your perspective transition.
.container, .item {
width: 200px;
height: 200px;
opacity:1;
}
.container {
perspective: 200px;
}
.container:hover .item {
transform: rotateX(180deg);
opacity:0;
}
.item {
background-color: #ff0000;
backface-visibility: hidden;
transition: transform 3000ms, opacity 0ms 1500ms;
}
I would suggest stop battling IE with the perspective property set on all transformed elements and start testing for support for preserve-3d. I followed this guy to expand Modernizr with a property test: https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21+
that way, its possible to do a fallback for IE's lacking implementation of 3d transforms, and start playing with the more cutting edge possibilities in the other browsers.
otherwise IE will make your code too messy, and still not give you the same possibilities - like rotating multisided 3d objects.
..just my 2 cents.
I have a nice illogical solution, I tried all the solutions above and none worked. However, an error did. I set the backface-visibility to visible when the card is flipped. works in both IE and Chrome.
It works better in Chrome, IE is ok.
var flipcard = document.getElementsByClassName("flipcard");
var i;
for (i = 0; i < flipcard.length; i++) {
flipcard[i].addEventListener("click", function() {
this.classList.toggle("is-flipped");
});
}
.card_scene {
width: 180px;
height: 234px;
margin: 10px 5px;
perspective: 600px;
float:left;
}
.flipcard {
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.flipcard.is-flipped {
transform: rotateY(180deg);
}
.flipcard.is-flipped .card__face {
backface-visibility: visible;
}
.card__face {
position: absolute;
max-width: 100%;
max-height: 100%;
line-height: 234px;
backface-visibility: hidden;
}
.card__face--front {
transform: rotateY(0deg);
}
.card__face--back {
background: white;
transform: rotateY(-180deg);
border: 1px solid #CCC;
width: 100%;
}
.cardtext {
margin: 6px;
font-size:14px;
line-height: 1.2em;
display: inline-block;
width: 100%;
white-space: pre;
}
.flipcard-breakfloat {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- start of flipcard tempalte -->
<div class="build-only">
<h2>question text here</h2>
<p>Flip the pictures to...</p>
<div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"><img width="180" height="234" id="yui_3_17_2_1_1534724749880_198" src="https://media.gettyimages.com/photos/world-heritage-listed-rainforest-in-dorrigo-national-park-new-south-picture-id936315116" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback **<br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"> <img width="180" height="234" alt="" src="https://media.gettyimages.com/photos/lonely-single-tree-in-the-field-picture-id680917092" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback ** <br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"> <img width="180" height="234" alt="" src="https://media.gettyimages.com/photos/old-tree-picture-id173501312" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback ** <br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
</div>
<div class="flipcard-breakfloat"></div>
</div>
<!-- end of flipcard tempalte -->
<p></p>
<p></p>
I implemented the solution proposed by #torbonaut and #chowey in this jsfiddle
html
<div id='container'>
<div class='backhide bottom'>bottom</div>
<div class='backhide top'>top</div>
</div>
css
#container, .bottom, .top {
width: 200px;
height: 300px;
position: absolute;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
.backhide{
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#container:hover .bottom {
-moz-transform: perspective(800px) rotateY(0);
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
}
#container:hover .top {
-webkit-transform: perspective(800px) rotateY(-180deg);
-moz-transform: perspective(800px) rotateY(-180deg);
transform: perspective(800px) rotateY(-180deg);
}
.bottom {
background-color: #ff0000;
-moz-transform: perspective(800px) rotateY(180deg);
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
.top {
background-color: #e0e0e0;
-moz-transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}