-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> div{ width: 100px; height:100px; color: white; background-color: orange; margin-top: 20px; } div:hover{ width: 99%; } .linear{ -webkit-transition: width 3s linear ; } .ease{ -webkit-transition: width 3s ease; } .ease-in{ -webkit-transition: width 3s ease-in; } .ease-out{ -webkit-transition: width 3s ease-out; } .ease-in-out{ -webkit-transition: width 3s ease-in-out; } </style> </head> <body> <div class="linear">linear</div> <div class="ease">ease</div> <div class="ease-in">ease-in</div> <div class="ease-out">ease-out</div> <div class="ease-in-out">ease-in-out</div> </body> </html>查看全部
-
transition查看全部
-
transition：过度的查看全部
-
<!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>3D</title> <style> #experiment{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; -webkit-transform-style:-webkit-preserve-3d; } #block{ width:500px; height:500px; background-color:#ccc; margin:100px auto; -webkit-transform:rotateX(45deg); } </style> </head> <body> <div id="experiment"> <div id="block"> </div> </div> </body> </html>查看全部
-
transform-origin的属性值查看全部
-
transform中的translate对应位移操作，rotate对应旋转操作。查看全部
-
transition之过渡模式的五种取值查看全部
-
transition多个属性过渡效果的写法查看全部
-
调整旋转中心查看全部
-
移动效果查看全部
-
三维旋转查看全部
-
简单的3D查看全部
-
transform查看全部
-
创建3D场景查看全部
-
transition查看全部
举报
0/150
提交
取消