11.24 2D转换

 1 <head>
 2     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 3     <title>2D转换</title>
 4     <meta name="keywords" content="关键字列表" />
 5     <meta name="description" content="网页描述" />
 6     <link rel="stylesheet" type="text/css" href="" />
 7     <style type="text/css">
 8     
 9     /*   transform: translate(50px,100px); 不同浏览器*/ 
10     /*  -ms-transform: translate(50px,100px);         IE 9 */
11     /*   -webkit-transform: translate(50px,100px);     Safari and Chrome */
12     /*   -o-transform: translate(50px,100px);         Opera */
13     /*   -moz-transform: translate(50px,100px);         Firefox */
14         
15         .div1{
16             margin:300px 600px;/*外边距*/
17             width:100px;/*设置宽*/
18             height:100px;/*设置高*/
19             background-color:yellow;/*设置背景颜色*/
20             box-shadow: 10px 10px 30px 0px #c0c0c0;/*h-shadow v-shadow blur spread color inset阴影水平偏移、垂直偏移、模糊程度,阴影的尺寸，阴影颜色*/
21             }
22         .div1:hover/*当鼠标经过*/
23             {
24             transition-duration: 5s;/*过渡时间*/            
25             -webkit-transform: translate(30px,-50px) rotate(360deg) skew(10deg,10deg) scale(2,2);/* translate(50px,100px) 把元素从左侧移动 30 像素，从底端移动 30 像素;旋转360度，值 skew(30deg,20deg) 围绕 X 轴把元素翻转 10 度，围绕 Y 轴翻转 10 度。  定义 2D 缩放转换，改变元素的宽度(填倍数)和高度(填倍数)。*/
26         
27     </style>
28     <script type="text/javascript"></script>
29 </head>
30 <body>
31     <div class="div1"></div>
32 </body>
33 </html>
posted on 2016-11-24 23:55 91xiaozhu 阅读(169) 评论(1) 收藏举报