css3 之 box-shadow, transform
transform:rotate()：
含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”
.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}
transform:skew()：
含义：倾斜；
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale()：
含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
transform:translate()：
含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}
transition主要包含四个属性值：
执行变换的属性：transition-property；
变换延续的时间：transition- duration；
在延续时间段，变换的速率变化: transition-timing-function
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)； 2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)； 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)； 4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)； 5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
变换延迟时间transition- delay。
transition: all .2s ease-in-out;
box-shadow:
x-offset ,x轴偏移
y-offset,y轴偏移
blur,模糊值
color of shadow,阴影颜色.
可以写多次.
inset 内阴影...
最后 , 附上 3dbutton
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; background: #d6d6d6; text-align: center; padding: 50px 0px; -webkit-perspective: 400; -moz-perspective: 400; perspective: 400; } .btn { display: inline-block; text-decoration: none; color: #fff; font-weight: bold; background-color: #538fbe; padding: 20px 70px; font-size: 24px; border: 1px solid #2d6898; background-image: linear-gradient(bottom, rgb(96,155,203) 26%, rgb(74,133,181) 100%); background-image: -o-linear-gradient(bottom, rgb(96,155,203) 26%, rgb(74,133,181) 100%); background-image: -moz-linear-gradient(bottom, rgb(96,155,203) 26%, rgb(74,133,181) 100%); background-image: -webkit-linear-gradient(bottom, rgb(96,155,203) 26%, rgb(74,133,181) 100%); background-image: -ms-linear-gradient(bottom, rgb(96,155,203) 26%, rgb(74,133,181) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.26, rgb(96,155,203)), color-stop(1, rgb(74,133,181)) ); /*圆角*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* 字体阴影 */ text-shadow: 0px -2px 0px rgba(0,0,0,.5); /*text-shadow: x-offset y-offset blur color;*/ /*.box:after */ /*3d*/ /* x-offset ,x轴偏移 y-offset,y轴偏移 blur,模糊值 color of shadow,阴影颜色 */ /* -webkit-box-shadow: 0px 6px 0px #2b638f; -moz-box-shadow: 0px 6px 0px #2b638f; box-shadow: 0px 6px 0px #2b638f; */ /* -webkit-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4); -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4); box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4); */ -webkit-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); } .btn:hover { background-image: linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -o-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -moz-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -webkit-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -ms-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(79,142,191)), color-stop(1, rgb(102,166,214)) ); } /线性渐变*/ .btn:active { background-image: linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); background-image: -o-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); background-image: -moz-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); background-image: -webkit-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); background-image: -ms-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(88,154,204)), color-stop(1, rgb(90,150,199)) ); -webkit-box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); -moz-box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); -webkit-transform: translate(0, 4px); -moz-transform: translate(0, 4px); transform: translate(0, 4px); /*平滑滚懂*/ -webkit-transition: all .1s ease-in-out 0; -moz-transition: all .2s ease-in-out 0; transition: all .2s ease-in-out 0; /*旋转*/ -webkit-transform: translate(0, 4px) rotateX(20deg); -moz-transform: translate(0, 4px); transform: translate(0, 4px); } </style> </head> <body> <a href="#" class="btn">Press Me</a> </body> </html>
