how can i put the div's from top to buttom and left to right
example: http://jsfiddle.net/ZWxGW/2/
http://jsfiddle.net/ZWxGW/2/
SOLUTION
http://jsfiddle.net/pMbtk/33/
You can use the column-count property for this type of function:
Check my previous answers for this
I want to show list items as 2 or more columns (dynamic alignment)
.message {
width:90px;
margin:3px;
background-color:#dfdfdf;
float : left;
}
Try this if left to right and top to bottom works out for you.
1) In this case you have to take column div(s) (red colored in image) and you have to put other divs 1,2,3,4 inside this div... as in image
give below properties to div.
.message,.outer_div{ float:left; height:auto;
width:200px; }
2) in another case,if you want from left to right,top to bottom, then you don't need to have a outer div...specified in red color
you can try this...
ul {
width:60px; height: 60px;
}
ul li{
float:left;
width:20px;
list-style:none;
}
ul, ul li {
-moz-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=-3.061616997868383e-16,
M12=1,
M21=1,
M22=3.061616997868383e-16,
SizingMethod='auto expand');
}
untested in IE http://jsfiddle.net/rlemon/Y5ZvA/3/
Remove height from contentDiv and put float:left; so that it wraps your content.
http://jsfiddle.net/ZWxGW/5/
I tried this in your example:
.message {
width:90px;
margin:3px;
background-color:#dfdfdf;
position:absolute;
}
and it helps.
Good-Luck !
Related
I'm trying to create a CSS animation where it looks like a div rotates around an image (or another div) on the X axis.
I was able to create a rough idea of it at: http://codepen.io/Kupe517/pen/zBKGev but the animated div does not have the rotation effect I am looking for. I figure I need to add in some kind of rotateX() to the transform and add perspective but I just can't figure out the right combo. I've attached a rough image of the kind of animation I am trying to achieve.
Here is my current animation code:
#keyframes moveBack {
0%{transform:translateY(0); z-index:10;}
25%{transform:translateY(435px); z-index:10;}
26%{z-index:0;}
50%{transform:translateY(0) scale(.8); z-index:0;}
75%{transform:translateY(-435px); z-index:0;}
76%{z-index:10;}
100%{transform:translateY(0); z-index:10;}
}
Here is a simple 3d transition that looks like what you are trying to achieve. The issue is that you are using translate but your aim is to rotate on the X axis.
To launch the transition, hover the div:
div{
position:relative;
width:300px; height:200px;
margin:10% auto;
perspective:500px;
transform-style:preserve-3d;
border:1px solid #000;
}
img{width:100%;}
p{
position:absolute;
left:250px; top:75px;
width:80px; height:40px;
margin:0; padding:5px 10px;
background:gold;
transform: rotateX(0deg) translatez(110px);
transition:transform 2s;
}
div:hover p{
transform: rotateX(360deg) translatez(110px);
}
<div>
<img src="http://i.imgur.com/k8BtMvj.jpg"/>
<p>Hover the div</p>
</div>
If you want the rotating div to always face the user, you can add another rotation after the translatez property like this:
div{
position:relative;
width:300px; height:200px;
margin:10% auto;
perspective:500px;
transform-style:preserve-3d;
border:1px solid #000;
}
img{width:100%;}
p{
position:absolute;
left:250px; top:75px;
width:80px; height:40px;
margin:0; padding:5px 10px;
background:gold;
transform: rotateX(0deg) translatez(130px) rotateX(0deg);
transition:transform 5s;
}
div:hover p{
transform: rotateX(360deg) translatez(130px) rotateX(-360deg);
}
<div>
<img src="http://i.imgur.com/k8BtMvj.jpg"/>
<p>Hover the div</p>
</div>
These work because when you chain transform properties on the same declaration, the last one is made according to the presvious ones. The coordinate system moves with the previous transforms.
I feel bad for this answer; I'll get the animation accurate. One moment-
Edit: Fixed.
A bit sloppy, but here's a working example of the concept you're shooting for. Play with the numbers to get how you want it. Hard to tell from the diagrams for what type of flow you're looking for:
http://codepen.io/anon/pen/JKRxmY?editors=1100
(You had a pesky origin property that I didn't see. Threw in some TranslateZ rules to clean 'er up a bit. )
I also forked this working example after changing the orientation:
http://codepen.io/anon/pen/WxGPpM?editors=0110
(and original) http://codepen.io/pukidepa/pen/nkJmv?editors=0110
The key here is with transform:rotateY(Xdeg);
Try out some of the code. Here's your animation CSS as it stands:
#keyframes moveBack {
0% {
transform: translateY(0) translateZ(100px) rotateX(0deg);
z-index: 10;
}
25% {
transform: translateY(125%) translateZ(-50px) rotateX(-70deg);
z-index: 10;
}
50% {
transform: translateY(0%) translateZ(-100px) rotateX(-180deg);
z-index: 10;
}
75% {
transform: translateY(-125%) translateZ(-50px) rotateX(-270deg);
z-index: 10;
}
100% {
transform: translateZ(25px) translateZ(100px) rotateX(-360deg);
z-index: 10;
}
}
Tip: when working with these types of rotations, it's best to remove the non-essentials like z-index at first and just get the movement down. You can always worry about that stuff later.
For a more circular rotation, you may want to stagger the effects of the rotation with the translation. In other words, try having one of the effects happen slightly before the other at different points of the animation.
want to position dynamic text vertically but text length alters the position of text, here is code snippet, adding more text changes the position try on this link
css
#rotate {
position:fixed;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
height:300px;
background-color:#e1e1e1;
margin-top:0px;
}
I think you are trying to do something like this. Note there is no need to add a set height/width as the translate and transform-origin values will adjust the positioning dynamically.
JSFiddle Demo
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#rotate {
position:fixed;
transform: rotate(-90deg) translateX(-100%);
transform-origin:left top;
background-color:#e1e1e1;
}
JSBin demo here.
How can I position a div rotated 90 degrees on the right edge of the page, centered vertically? Thanks in advance.
Try this:
div {
font-family: sans-serif;
background: red;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: bottom left;
position: absolute;
width:200px;
height:20px;
top:50%;
margin-top:-20px; /* height */
right:-200px; /* width */
}
div{
vertical-align:middle;
float:right;
/* FF Chrome Opera etc */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Check this, may help you a bit.
I have made a fiddle:
http://jsfiddle.net/89x4d/
I'm trying to maintain the skewed div but keep the p text straight.
Is this possible?
Thanks
You should use 20deg instead of 0deg on P to compensate for the DIV transform (since the result is the composition of transforms.)
In order to cancel the effect of the skew, you have to give positive value of transformation.
p {
-webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
transform: skew(20deg) !important;
}
Demo
div {
width: 200px;
height:50px;
background: red;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
margin: 20px;
padding:0 25px;
}
p {
-webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
transform: skew(20deg) !important;
}
<div>
<p>hey i'm straight, ok?</p>
</div>
hey i'm straight, ok?
I'm not sure if you can get it to skew back, seems to distort the font too much.
skew(20) is the closest i could get, but instead you could setup 2 divs, 1 for a skew box and another to then move over it.
http://jsfiddle.net/gP9ne/3/
Setup a fiddle there for you to see
Martyn
edit: actually doesnt look any different :p i think its just the black on red with the font doesnt like my screen :p
always over thinking!
As others have pointed out, reversing the skew of the <p> can lead to some undesirable results.
It's also not super reusable in that for every new skew angle you would need a corresponding CSS selector/declaration to reverse the internal content.
As an alternative, use the :before selector to add the skewed element behind the text.
HTML
<div>
<p>hey i'm straight, ok?</p>
</div>
CSS
div {
width: 200px;
height:50px;
margin: 20px;
position:relative;
}
div:before {
content: "";
display:block;
background: red;
position:absolute;
width:100%;
height:100%;
z-index:-1;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}
And a demo.
How to make a angled arrow like this with gradient and transparent?
I made a block with gradient here. need help to convert into arrow.
http://jsfiddle.net/jitendravyas/aZ65c/2/
I need a compatible with ie8 compatibility
#jitendar; check this out i make it with pure css:
.button {width:70px;
height:140px;
overflow:hidden;
}
.button:after {
content:"";
width:100px;
height:100px;
background: linear-gradient(left top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
margin-top:20px;
margin-left:25px;
}
Check the fiddle http://jsfiddle.net/sandeep/aZ65c/7/