I have a css transform in a css3 animation that caused a div to flip over. The problem is that the content appears flipped too.
I just want the div to be flipped, but the content to remain unflipped.
Here is a JS Fiddle with my animation taking place on page load: http://jsfiddle.net/ukg4P/
See, the div and the content is flipped. How can I just flip / transform the div, but not it's contents?
Here is the animation, with the transform, that I am using:
#keyframes flip{
0%{
transform:perspective(400px) rotateY(0deg);
}
100%{
transform:perspective(400px) rotateY(-180deg);
}
}
You have to wrap the inner element in a span and apply the opposite transform :
<div class="animated flip"><span class="inner">Settings</span></div>
.inner{
display:block;
-webkit-transform: perspective(400px) rotateY(180DEG);
}
demo
Related
I wanna rotateY() but from center of this earth image. Now it's rotating from the right side. Here is my code:
#keyframes rotate {
to {
transform: rotateY(-360deg);
}
}
http://jsfiddle.net/qwrg9684/
It works if you operate on the image directly. https://jsfiddle.net/akso4r6q/
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" />
#logo {
animation: rotate 5s linear infinite;
transform-origin: center center;
}
#keyframes rotate {
to {
transform: rotateY(360deg);
}
}
If you need it to be in a div you can also set display: inline-block;. The appearance of rotating around the right side of the image is actually the rotation happening around the center of the enclosing div which is expanding horizontally to fit the viewport.
You can see a fiddle here that shows this with a text element that is a sibling of the image.
I have tried a flip menu with the bootstrap dropdown menu using transform. The flip is working fine but the drop-down menu is rendering underneath the form elements even though z-index is present for the drop-down menu.
Upon reading, I understood its the stacking context issue when using transform but I couldn't able to figure out the solution.
The code is available here code link. The z-index is not applying due to the below code.
.frontbar {
transform: translateY(0%) rotateX(0deg);
transition: all 0.5s;
transform-origin: 50% 100%;
}
.menubar {
transform: rotateX(-90deg);
transition: transform 0.5s;
transform-origin: 50% 0%;
}
Click the Flip button
click on the menu, the submenu in the dropdown is underneath the form elements
You need add the z-index to the parent :
.wrapper.flip { z-index: 2;}
I'm learning CSS and playing with TranslateY
I have reached an issue. When I hover my mouse over a div, a JavaScript event (mouseover) is fired and simply appends this CSS class and as desired, the new element slides in from below
.slideIn{
animation: slide-in 0.5s forwards;
}
#keyframes slide-in {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
The first observation I have is my numbers appear backwards. When it's at 0%, translate (meaning move along the Y axis) 100%. To me the CSS reads as if it starts in position then moves down to position 0%.
However what I'd like to achieve is when this elements slides in, is if I hover the mouse over this new element, it grows by a little. I would suspect something like
.growMore{
animation: grow-more 0.5s forwards;
}
#keyframes grow-more {
0% { height:100%; }
100% { height: 150%; }
}
I did try adding another TranslateY but it also gave no result, hence why I tried with height
Is this possible?
I have one problem regarding rotating the <div> in html page. I have used -
-moz-transform: rotate(90deg)
But this property is rotating the <div> along some axis.(couldnt get that). But i want to rotate the <div> along its bottom side.(here, my div is a square-box). Is it possible?
Thanks.
sounds like transform-origin is what you're looking for.
The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)
so you should end up with something like this:
transform: rotate(90deg);
transform-origin: center bottom;
/*transform-origin: 50% 100%; alternative using percentages */
you can use this properties
transform: rotate(90deg);
transform-origin: center bottom;
You can give X% and Y% as tranform-origin
For example this will gone rotate div along bottom-left corner
transform: rotate(-10deg);
transform-origin: 0% 100%;
This one gone rotate along top right corner
transform: rotate(-10deg);
transform-origin: 100% 0%;
This one gone rotate along bottom right corner
transform: rotate(-10deg);
transform-origin: 100% 100%;
and so on ...by default its 50%,50%
transform: rotate(-10deg);
transform-origin: 50% 50%;
First of all, an image of what I am trying to acheive:
Sample here:
http://i.imgur.com/3BpFF.png
The white box with the word 'div' in it is obviously the div I have. For my purposes, it's a div centered in a page using width:500px; margin: 0 auto;. What I want is to be able to align some rotated text (using -moz-transform: rotate(90deg) or alternatively prefixed rotates) along the top of the div, like the word 'Holy' above (sample text). I would also like to set the baseline on that div, though it isn't that important.
By the way, I used some absolute positioning in Firebug to get the text aligned there - it was hacked there using per pixel positioning. It's not very flexible (if at all) because once I increase the font size or change the position of the div, it's broken.
Also: I am open to using SASS and other such things (I don't have any experience with it yet, but I do I think it allows use of variables which may help).
When you can use CSS transform it means you can use pseudo elements in your CSS code. Then I will add that "Holly" part via :after pseudo element.
div:after{
content:"Holy";
line-height:20px;
position:absolute;
background:yellow;
padding:0 10px;
left:100%; top:0;
-webkit-transform:rotate(90deg) translateY(-100%);
-webkit-transform-origin:0 0;
}
As you can see I've use translateY to move this part out of the div, because we rotated the thing before then translateY will work as translateX.
transform-origin is set to 0 0.
This code is independent from you div size.
Look at it live here:
http://jsbin.com/akaziy/2/
You can place something like this in your .css file (the margin-top & margin-bottom are just examples)
div {
width:500px;
margin: 0px auto;
}
.holly {
margin-top:20px;
margin-left:520px
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer 9*/
-ms-transform: rotate(90deg);
/*undefined prefix*/
transform: rotate(90deg);
}