Write a style that will rotate, create shadow and make rounded corners

div {
  border-radius: 25px;
   box-shadow: 10px 10px 5px #888888;
   -ms-transform: rotate(2deg);
   -moz-transform: rotate(2deg);
}

More info and samples on: www.devarchweb.net

Available transformations

<div style="
border: solid 2px blue;
width: 200px; height:100px;
transform: translate(20px, -30px) scale(0.5,0.5) rotate(5deg) skew(-15deg, 0deg);
">Transform</div>

More info and samples on: www.devarchweb.net

Use transition to stretch DIV element when user moves mouse over the element In this example, when user moves mouse over the element, height will be increasing its size from 100px to 200px
for 3 seconds starting immediatelly and after 1 second from the mouse move width of the div will be expanding from 100px to 200px for 2 seconds

#mytransition { width: 100px; height:100px; }
#mytransition:hover { width : 200px; height: 200px}

<div id="mytransition" style="
border: solid 2px blue;
transition: width 2s linear 1s, height 3s;
">Mouse over here</div>

property - duration - type - delay

More info and samples on: www.devarchweb.net

Use animation to change element position and border

#myanimation:hover {
  position: relative;
  animation: animationPath 3s;
animation-fill-mode:forwards; /* remains at the end of the path */
}

@keyframes animationPath {
  0% {border: solid 1px blue; left:0px; top:0px;}
  50% {border: dashed 10px black; left:300px; top:300px;}
  100% {border: solid 5px green; left:600px; top:0px;}
}

You can see that border type gets ignored

<div id="myanimation"
style="border: solid 2px blue;"
>Mouse over here and hold it inside of the box</div>

More info and samples on: www.devarchweb.net

different style based on screen size

More info and samples on: www.devarchweb.net

CSS3 selectors

/* 1 logical */
img:not(p) - all elements except p

/* 2 combinator */
div ~ li /* get all li direct siblings of div */

/* 3 content */
img[src*="ie"] - /* all attributes containing "ie" */

/* 4 order */
table tr:odd - rows with odd numbers
li:nth-child(5n) - every fifth item

/* 5 state */
input:enabled
input:disabled
input:checked - /* checked input elementes */
input:checkbox:checked /* all checked checkboxes */
input:empty

input:required /* all elements with required attribute */
input:optional /* all elements without required attribute */

/* 6 hierachy */
img:only-of-type /* parent of img has only 1 img child */
input:only-child /* parent of img has only 1 child */

p:first-of-type /* selects first p elements of its parent */
p:last-of-type /* selects last p elements of its parent */

More info and samples on: www.devarchweb.net