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 {
}
Related
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.
Is it possible to rotate (90-180-270 degrees), flip (horizontal/vertical) and resize (2x, 3x) icons easily in kendo-ui mobile?
You can do rotate easily with CSS transforms, something like this:
<style>
.km-home:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
You can flip an element with CSS transforms too:
<style>
.km-home:after {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
</style>
You can also use scale to resize it - scale(2), etc...
However this question has nothing to do with Kendo UI :)
Here is an example implementation of previous and next buttons using a custom kendo mobile icon based on Bundyo's insights:
<a data-role="button" class="prev" data-icon="custom"></a>
<a data-role="button" class="next" data-icon="custom"></a>
CSS:
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after,
.km-button.next .km-icon.km-custom:before, .km-button.next .km-icon.km-custom:after { content: "\e217" }
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after { -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
The platform were I work does not support #keyframes because of security reasons with the #.
My question is if I can replace it with some other css trick.
For example I have this code:
.cubo {
animation:giro 25s infinite linear;
}
#keyframes giro {
0% {transform: rotateX(0deg) rotateY(0deg);}
100% {transform: rotateX(1080deg) rotateY(360deg);
}
}
Can I replace it with transitions or transforms to avoid using the #? (no javascript supported either).
You could instead make it a transition by multiplying the transition duration, rotateX, and rotateY values all by a common factor x and applying the transition class on page load. In my example I multiplied them by 40, but you can go as high as you want but I wouldn't go too high because the processor might overload at some point and break the page. This runs for 1000 seconds, not many people will stay on a page past that
Here is a live demo of that approach
/* CSS */
.cubo {
/* ...Your other code... */
transition: all 1000s linear;
}
.animate {
-webkit-transform: rotateX(43200deg) rotateY(14400deg);
-moz-transform: rotateX(43200deg) rotateY(14400deg);
-o-transform: rotateX(43200deg) rotateY(14400deg);
-ms-transform: rotateX(43200deg) rotateY(14400deg);
transform: rotateX(43200deg) rotateY(14400deg);
}
/* Javascript (ran on page load) */
document.getElementsByClassName('cubo')[0].classList.add('animate');
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.