码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 图片旋转

时间:2015-10-14 00:07:30      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

.nav_all { position:relative; z-index:10001; width:172px; display:inline; float:left; *zoom:1; }
.nav_all b { display:block; font-size:16px; text-align:left; color:#fff; padding:0 15px; height:46px; line-height:46px; background:#f90; }
.nav_all b i { float:right;display:inline-block; margin-left:10px; width:16px; height:46px; line-height:46px; background:url(../images/nav_all.gif) center center no-repeat;                           -moz-transform-origin:50% 50%;
               -webkit-transition:-webkit-transform .3s ease-in;
               -moz-transition:transform .3s ease-in;
               -o-transition:transform .3s ease-in;
               transition:transform .3s ease-in;}

.nav_all_box1 { display:none;/*大框架边框*/ width:170px; position:absolute; left:0px; top:46px; z-index:10002; border:1px solid #f90; border-top:none; box-shadow:0px 0px 3px #f60;} 
.nav_all_box1 dl { position:relative; z-index:10003; float:left;  }
.nav_all_box1 dl dt { padding:10px 15px; /*大框架背景宽度*/width:140px; color:#ccc; position:relative; z-index:10005; background:url(../images/jt_12.gif)/*背景图标left距离*/  150px 16px no-repeat #fff; border-top:1px solid #fff; border-bottom:1px solid #fff;}
.nav_all_box1 dl dt a { color:#666; }
.nav_all_box1 dl dt a:hover { color:#f90; text-decoration:underline; }
.nav_all_box1 dl dd a { color:#06c; }
.nav_all_box1 dl dd a:hover { color:#f90; text-decoration:underline; }

.nav_all_box1 dl dt:first { font-size:18px;} 


.nav_all_box1 dl dd { display:none; padding:0 20px 20px 0px; /*子框架宽度*/width:477px; position:absolute; /*子框架边框*/left:170px; top:0; z-index:10004; background:#fff; border:1px solid #f90; height:auto !important; min-height:200px; height:200px; box-shadow:0px 0px 3px #f60;  }

.nav_all_box1 dl.last dd { bottom:0; top:auto; _margin-bottom:-1px;}

div.nav_all_on b { background:#f90; box-shadow:0px 0px 3px #f60;}
div.nav_all_on b i {
                     transform:rotate(180deg);
                     -webkit-transform:rotate(180deg);
                     -moz-transform:rotate(180deg);
                     -o-transform:rotate(180deg);
                     }

 

CSS3 图片旋转

标签:

原文地址:http://www.cnblogs.com/archoncap/p/4876109.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!