CSS3 reference

-webkit for Chrome and safari sometimes opera
-MS is for IE9 and IE10

Transform Rotate

transform: rotate(25deg)(for IE 11)
-ms-transform: rotate(25deg)(For lesser version of IE)
-webkit-transform:rotate(25deg) (for rest of the browser)
transform: rotateX(25)(for IE 11)
transform: rotateY(25)(for IE 11)
transform: rotateZ(25)(for IE 11)
transform: rotate3D(100,300,100,60deg)(for IE 11)

Transform Matrix
transform: matrix(0.9,-0.3,0.7,0.8,0.1,0.2)//6 values
transform: matrix3d(0.9,-0.3,0.7,0.8,0.1,0.2)//16 values

Transform Translate
position: absolute
left: 100px
right:100px
Alternative
transform: translate(100px,100px)

Scaling Object

transform: scale(1.5,1.5)
transform: scaleX(1.5)

Skewing objectstransform:skew(30deg,10deg)

Adding Perspective Objects
transform:rotateX(60deg) rotateY(40deg)
transform:perspective(800px) rotateX(60deg) rotateY(40deg)

Animation with keyframes

animation:mymove 5s 1; /*IE 11 and Firefox*/
-webkit-animation:mymove 5sa 1 ;/* for safari,chrome and opera*/
-ms-animation:mymove 5sa 1;/*for IE9 and IE10 */
@keyframes mymove /*IE 11 and Firefox*/
{
        from {left:0px;}
       to {left: 300px;}
}
frequency 5s and cylce: 1
@-ms-keyframes mymove
@-webkit-keyframes mymove
animation :movDiv 5s infinite;

Frames from and to translated to percentage
@keyframes movDiv /*IE 11 and Firefox*/
{
       0%  {left:0px;}
       25% {left:200px;}
        50% {left:300px;}
        100% {left:400px;}
}
@keyframes movDiv /*IE 11 and Firefox*/
{
from {background-color: #fff;}
to {backgroung-color:#000;}
}
Color with keyframes
@keyframes movDiv /*IE 11 and Firefox*/
{
0%{background-color: #fff;}
100%{backgroung-color:#000;}
}
//Rotate we can use left and right
@keyframes movDiv /*IE 11 and Firefox*/
{
0%{transform:rotate(0deg);}
50%{transform:rotate(25deg);}
100%{transform:rotate(90deg);}
}

Background Image
body{
background-color: #fff;
background-image:url(/images/something);
background-repeat:norepeat;
}


Creating columns and flow text using css3
#content{
float:left;
column-count: 3;
-moz-column-count:3;
-webkit-column-count:3;
}

using image alignment
.imgleft{
float:left;
padding-right:5px;
}


pseudo selector ::
Apply bullet before and after of p tag
p::before, p:: after{
content:url ("bullet.png");
}

p:: first-line{
color:#fff;
font-variant:small-caps;
}
p::first-letter{
color:#ffd800;
font-Size:30Px;
}

BOX Shadow

3D Inset emboss
.titlebox{
box-shadow: 10px,10px,5px #ffff inset;
}
text-shadow: 10px,10px,5px #ffff;

Linear gradient
background:linear-gradient(red,yellow,blue);

-ms-linear
-o-linear //opera
-moz-linear
-webkit-linear

background:linear-gradient(left,#ff 0%,#ff 50%,#ff 100%);

Radial Gradient
background:radial-gradient(circle,#ff 0%,#ff 50%);

Gradient text
background:-webkit-linear-gradient(25deg, yellow,blue))
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
Transparent
opacity:0.5;
filter:aplha(opacity=50);

Range Slider style

input[type="range"]{
-webkit-appearance:none;
-webkit-border-radius:10px;background-image:-webkit-linear-gradient(top,black,white,black);
}

Create Arrow using Border.uparrow{
                 width:0px;
                 height:0px;
                 border-left: 50px solid transparent;
                 border-right: 50px solid transparent;
                  border-bottom: 50px solid ##ff0000;
}