CSS3 图片旋转

.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);
                     }

时间： 2024-10-17 03:26:18

CSS3 图片旋转的相关文章

关于css3图片旋转transform：rotate（）问题总结

前两天做了一个关于贺卡制作的项目,项目要求上传图片 ,图片旋转,播放音乐等几个特效,今天讲讲图片旋转的问题, css3属性中有一个transform:rotate();大家最好写-webkit-transform:rotate():-moz-transform:rotate();这样控制好样式之后要控制像发微博图片那样点击就旋转多少度的html代码,javascript代码 <div id="rotate">旋转按钮</div> <img src=&qu

CSS3图片旋转特效

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p#socialicons img { /* 1st set of icons. Rotate them 360deg onmouseover and out */ -moz-tran

css3图片旋转

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>css3实现社交图标旋转效果</title> </head> <style> #container { width: 960

纯css3图片旋转展示

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background: lightblue; } div.box{ /*position: absolute;*/ width: 200px; height: 300px; /*left:

基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转效果图如下: 这个效果实现起来其实并不困难.代码清单如下: <style type="text/css"> #liu{ width:280px; height: 279px; background: url(shishi.png) no-repeat; border-radius:140px; -webkit-animation:run 6s

IE下及标准浏览器下的图片旋转（一）——滤镜，CSS3

关于图片的旋转,一般来说有3种解决方案:(1)滤镜 (2)css3 (3)canvas.接下来逐一讲解. 为了方便理解,我们主要以90度整倍数讲解,兼顾其他角度. 1. 滤镜(IE专属) 1.1 旋转滤镜语法如下: filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i); rotation取值0(0或360度),1(90度),2(180度),3(270度).取其他数无效. 旋转90度示例: css: #box {

css3 3d旋转图片立方体特效代码

一.什么是css3 3d旋转 ? 形成一个3D空间: transform-style:preserve-3d ( 让父元素形成3D,让其子元素在3D空间进行变化 ). 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴,Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向,2d场景,在屏幕上水平和垂直的交叉线x轴和y轴. 二.关于css 3d旋转的相关属性及使用方法变形属性:transform 3D功能函数 ----3D的位移:transform:translate3d(x,y,z);

css3制作旋转立方体相册

css3制作旋转立方体相册首先让我们来看一下最终效果图: 当鼠标放在图片上是介个样子滴: 是不是觉得很好看?那接下来就一起制作吧! 我个人觉得编程,首先是思路,然后是代码,一起分析一下这个效果的思路. 1.背景颜色,它属于一种渐变的背景色(当然这不是重点,可以根据自己的爱好进行设置): 2.我们可以观察一下他是有两个旋转的立方体,大立方体套小立方体: 3.点击图片的时候,外部大立方体向外延伸. 有了这个大体的思路我们就可以开始敲代码了. 1.新建文件夹将各个不同类型的代码进行归类是很有必要的

css 中图片旋转,倾斜,位移,平滑

在开发中,我们常常需要对图片有一些绚丽的效果,比如是图片旋转,平移,倾斜等.其实这些在css3中都已经存在,整理下作为demo,以后参考使用,也希望供大家交流学习.如果不足,多多指导. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片效果</title> <style type="text/css"> *{