CSS3 transformation with Rotating gears example

Introduction
Given a static image like this one

We might apply many kinds of transformations on it using CSS3 "transform" like rotate and scale, skew or any transformation matrix.

How to apply it ?
You can rotate gear by 120 degrees using the following css
.my_class {
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-ms-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}
You may scale to be 50% smaller using a similar sytax: 
.my_class {
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-ms-transform:scale(0.5);
-o-transform:scale(0.5);
transform:scale(0.5);
}

you may also specify different factor for X-axis and Y-axis using scale(X,Y);
You may specify two transformations like this 
.my_class {
-webkit-transform:rotate(120deg) scale(0.5);
-mox-transform:rotate(120deg) scale(0.5);
}

Here is an example

How to animating it ?
we can use "@-moz-keyframes" and "@-webkit-keyframes" we have learned in a previous post titled creating CSS3 animations using something like

@-moz-keyframes ani {
  0% { -moz-transform:rotate(0) scale(1);}
 50% { -moz-transform:rotate(180deg) scale(0.5); }
100% { -moz-transform:rotate(360deg) scale(1); }
}
and here is the result

Live Demo

You can see the above rotating gear in jsfiddle here

Comments

Post a Comment

Popular posts from this blog

Bootstrapping Alpine Linux QCow2 image

Introduction Alpine Linux is a minimal distro with package manager ( APK ) that is based on busybox and musl library . Like the  CirrOS , it's very lightweight, but unlike it, it's full featured. In case you don't know me, my Linux distro of choice is Fedora/CentOS, in this post I'm going to bootstrap a QCow2 cloud image of Alpine Linux on my distro of choice. Using docker to bootstrap a working chroot Type mkdir alpine35-root docker run --rm -ti -v $PWD/alpine35-root:/data alpine:3.5 apk --arch x86_64 -X http://nl.alpinelinux.org/alpine/v3.5/main/ -U --allow-untrusted --root /data --initdb add alpine-base  and you should get a line like this OK: 6 MiB in 16 packages so now we have a working alpine chroot in the directory alpine35-root Creating Bootable QCoW2 Image Because I don't want to format my hard disk by mistake and because I know Murphy's law, I'll take those 6MB as tarball and continue on a VM. dd if=/d...
Read more

Making minimal graphical operating system

Image
Back in my first days of Linux I had a bootable floppy disk with fully functional Linux distro (a kernel, a shell and busybox tools and lua scripting). Maybe that was not much, but it was less than 2MB and would work on an old 386 PC with 4MB of RAM. But shell is boring, graphical minimal Linux distros was several hundreds of mega bytes and need hundreds of MB of RAM. Embedded devices typically have a minimal Linux with busybox or alike running with no graphical interface but instead they have some sort of web interface exposed to some port. If you tried to run a minimal graphical Linux distro let's say XFCE on an embedded device (let's say a raspberry pi) you would notice that most of its limited resources are taken by Xorg the legacy graphical server. Introducing Wayland Wayland is a new different approach to graphical interface, instead of sending drawing instruction over a legacy protocol (with so many extensions) to a legacy daemon (with so many extensions) that ...
Read more

DIY Docker using Skopeo+OStree+Runc

Image
Docker is awesome, but what is even more awesome about UNIX philosophy is that you can use combine small tools to create a something that work like docker. Actually Dockerlite used BTRFS and LXC to make a toy version of docker. In this post we are going to discuss show how one can pull a Docker image and run the containers without a docker daemon, of course we do this for fun. We are going the achieve the following: ability to pull docker images space efficient  storage of images and containers even better that docker (not just reuse layers, but even files) run the container We are going to use OSTree : content addressable storage, git-like for OS Images, space efficient and uses hardlinks Skopeo : a way to pull all kinds of images and convert them to all kinds of storage Runc (or any OCI runtime like bubble wraps oci ) In this post we are going to run everything as non-root regular user (to make it even more challenging) let's create a bare OSTr...
Read more