I did try a all sort of codes but i can't seem to get it right.
What i like to see is that the different posts with thumbnail have different degrees for rotation.
Here is the css code that i tryed:
.hentry .post-thumb li:nth-child(2n){
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
.hentry .post-thumb li:nth-child(3n){
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
You can see the site here.
Thanks
The CSS you provide in your question doesn't match the HTML on the site you're linking to. There's no li descendent of a .post-thumb element.
I think you misunderstand how the nth-child() pseudo-class works, though. You should be doing something like this:
.hentry:nth-child(2n) .post-thumb img { transform: rotate(3deg); /* etc. */ }
.hentry:nth-child(3n) .post-thumb img { transform: rotate(-3deg); /* etc. */ }
This will rotate the thumbnails of every second post 3 degrees to the right (i.e. the 2nd, 4th, 6th etc. child of the .posts div), and all thumbnails of every third post 3 degrees to the left (i.e. the 3rd, 6th, 9th etc. child of the .posts div).
I'm not sure if 2n and 3n are quite the expression you intend either, though. Perhaps Sitepoint's "Understanding :nth-child Pseudo-class Expressions" will help.
Related
If you have a CSS property with a prefix:
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
and reach a browser that uses the prefixed version, will it ignore the un-prefixed property or apply the property twice by also processing the prefixed version as well?
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
A Browser will parse the attributes in order. If for example webkit reads the -webkit-transform but then reads transform wich it also knows, it will overwrite the rule of -webkit-transform. This technique is called CSS-Fallbacks and is a effect of cascading stylesheets. It will only apply it once, after reading the entire rules.
So in your case it will rotate 10deg once, and not 10deg and again 10deg
Another Example would be:
.test {
height: 100px;
background-color: red;
background: blue;
}
<div class="test"></div>
It wont ever apply the color "red", as it is overwritten by "blue" in the same stylesheet.
There's no such thing in css as a property applied twice on the same element. Never.
The browser will read them in order and only apply the last one it understands.
I am trying to create a "cube" effect where i can toggle between three objects and create the feeling of turning a cube.
Works fine with 2 sides, but i am stuck trying to add a third. Can someone please explain why the third site floats away?
I guess i am doing something wrong with item-3? But i just can't figure it out
.item-1{
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.item-2{
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
.item-3{
-webkit-transform: rotateX(-180deg) translateZ(-50px);
transform: rotateX(-180deg) translateZ(-50px);
}
Live example:
http://jsfiddle.net/esbeka9t/
There you go:
Just change your .item-3 class like this:
-webkit-transform: translateZ(-50px) rotateX(-180deg) translateY(200px);
transform: translateZ(-50px) rotateX(-180deg) translateY(200px)
It seems your .items are positioned relative to each other. Giving .item a position: absolute, a fixed width and changing the translate values just a bit on your .item classes should solve the issue. Here is a modified version of your example to illustrate this.
This is my menu. As you see, the title of the slides appears horizontally.
This is how I would like them (in terms of text positioning):
As shown in this fiddle: http://jsfiddle.net/VRe8W/1/
You can rotate it by rotating the .image_title a with the css3 rotation function
transform: rotate(90deg) ;
-webkit-transform: rotate(90deg) ;
-moz-transform: rotate(90deg) ;
-o-transform: rotate(90deg) ;
-ms-transform: rotate(90deg) ;
Don't forget all the prefixes, otherwise it won't work in some browsers.
I am trying to add some randomisation by making elements rotate slightly based on being odd or even.
See JS fiddle
Essentially there is a style applied to odd and even using nth-child which should make every other one rotate at a different angle but it does not seem to apply the second...
ul.polaroidGrid li .polaroid:nth-child(even){
transform: rotate(-1deg) ;
-webkit-transform: rotate(-1deg) ;
-moz-transform: rotate(-1deg) ;
-o-transform: rotate(-1deg) ;
-ms-transform: rotate(-1deg) ;
}
ul.polaroidGrid li .polaroid:nth-child(odd) {
transform: rotate(1deg) ;
-webkit-transform: rotate(1deg) ;
-moz-transform: rotate(1deg) ;
-o-transform: rotate(1deg) ;
-ms-transform: rotate(1deg) ;
}
Example HTML for one item
<li>
<div class="polaroid">
<img src="images/makers/getbetter.jpg" />
<span class="polaroidTitle">Get Better Clothing</span>
getbetterclothing.com
</div>
<p>Clothing which draws inspiration from childhood toys and nature using fun illustrative styles.</p>
</li>
Each .polaroid is the first and only child of its parent, so they're all odd.
You want the odd and even lis.
I believe, that must be something like this:
ul.polaroidGrid li:nth-child(even) .polaroid{
}
ul.polaroidGrid li:nth-child(odd) .polaroid {
}
When trying to apply a CSS transform with perspective I encounter a weird glitch in that the top half of the divs are unselectable. I have created a a quick demo here on jsfiddle
[The top selection of red boxes should be clickable and such]
Does anyone know how to fix this? I've looked at other similar errors but their solutions don't seem to work here.
Cheers
This should do the trick
.ca-item {
-webkit-transform: skewX(-5deg) scale(1, 1);
-moz-transform: skewX(-5deg) scale(1, 1);
-ms-transform: skewX(-5deg) scale(1, 1);
transform: skewX(-5deg) scale(1, 1);
background-color: blue;
position:relative;
width:1060px;
height:550px;
text-align:center;
}