2D转换
在二维的平面上做一些变化，使用transform属性
2D转换之移动（将div在屏幕中居中）translate
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#090;
position:absolute; /*绝对定位*/
left:50%;
top:50%;
transform:translate(-50%,-50%); /*以自己左上角为原点，向左移动50%,向上移动50%*/
}
</style>
2D转换之旋转（rotate）
默认情况下是按中心点旋转，我们可以通过transform-origin调中心点，
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#090;
margin:100px auto;
transform-origin:top left; /*旋转的中心点，中心点在左上角*/
}
div:hover{
transform:rotate(45deg); /*deg表示度数*/
}
</style>
2D转换之缩放（scale）
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#090;
margin:100px auto;
}
div:hover{
/*transform:scale(0.5);*/ /*x轴和Y轴都是缩放0.5倍*/
/*transform:scaleX(0.5);*/ /*在x的方向上缩放0.5倍*/
transform:scale(2,3);
}
</style>
2D转换之斜切（skew）
<style type="text/css">
div{
width:200px;
height:200px;
background-color:#090;
margin:100px auto;
}
div:hover{
/*transform:skewX(8deg);*/
transform:skewY(10deg);
}
</style>
例题：三角的做法
<style type="text/css">
div{
width:300px;
height:40px;
border:#5c5c5c solid 1px;
margin:100px auto;
position:relative;
}
div:after{
content:'';
width:12px;
height:12px;
display:block;
border-right:#5c5c5c solid 2px;
border-bottom:#5c5c5c solid 2px;
position:absolute;
top:50%;
right:12px;
transform:translateY(-50%) rotate(45deg);
}
div:hover{
border:#009 solid 1px;
}
div:hover:after{
border-right:#009 solid 2px;
border-bottom:#009 solid 2px;
}
</style>
<div></div>
过渡（transition）
动画过渡类型
小例题
<style type="text/css">
div{
width:200px;
height:100px;
border:#00F solid 3px;
background-color:#F90;
margin:100px auto;
border-radius:15px;
/*transition:width 0.5s ease 0s;*/
/*transition:all 0.5s ease 2s;*/
transition:all 0.5s;
}
div:hover{
width:300px;
height:150px;
background:#F30;
}
</style>
<div></div>
例题：头像旋转
<style type="text/css">
img{
border:#093 solid 4px;
display:block;
margin:100px auto;
border-radius:50%;
transition:all 1s ease 0;
}
img:hover{
transform:rotate(360deg);
}
</style>
<img src="images/face.jpg">
例题：鼠标经过图片变大
<style type="text/css">
div{
width:200px;
height:200px;
border:#666 solid 1px;
margin:100px auto;
overflow:hidden;
}
div img{
transition:all 0.5s;
cursor:pointer;
}
div img:hover{
transform:scale(1.1);
}
</style>
<div><img src="images/face.jpg"></div>
3D转换
3D转换之X轴旋转
X轴的旋转就像单杠的旋转。
例题：
<style type="text/css">
div{
width:200px;
height:200px;
margin:100px auto;
border:#000 solid 1px;
perspective:400px; /*透视的效果，这个属性必须给父元素添加*/
}
img{
transform-origin:bottom;
transition:all 0.5s
}
div:hover img{
transform:rotateX(60deg); /*X轴旋转60度*/
}
</style>
<div><img src="images/face.jpg"></div>
例题：打开盒子（3D转换之X轴旋转）
完整代码：
<style type="text/css">
#content{
width:300px;
height:300px;
margin:50px auto;
position:relative;
}
#face1,#face2{
width:300px;
height:300px;
background:url(images/musicb.jpg) no-repeat;
position:absolute;
top:0px;
left:0px;
border:#666 solid 1px;
border-radius:50%;
}
#face2{
background:url(images/musict.jpg) no-repeat;
transform-origin:bottom;
transition:all 2s;
}
#content:hover #face2{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<div id="content">
<div id="face1"></div>
<div id="face2"></div>
</div>
3D转换之Y轴（百度钱包）
Y轴旋转就像钢管舞，沿着Y轴方向旋转。
例题
完整代码：
<style type="text/css">
body{
background:#f14849;
}
#content{
width:300px;
height:300px;
margin:100px auto;
position:relative;
}
#face1,#face2{
width:300px;
height:300px;
background:url(images/baidu_bg.png) no-repeat left bottom;
position:absolute;
top:0px;
left:0px;
transition:all 1s;
backface-visibility:hidden; /*转过去以后隐藏*/
}
#face1{
z-index:1;
}
#face2{
background-position:-305px bottom; /*css中spirits技术*/
transform:rotateY(-180deg);
}
#content:hover #face1{
transform:rotateY(-180deg);
}
#content:hover #face2{
transform:rotateY(0deg);
}
</style>
</head>
<body>
<div id="content">
<div id="face1"></div>
<div id="face2"></div>
</div>
例题：抽奖
<style type="text/css">
#content{
width:650px;
height:600px;
background:url(images/turntable-bg.jpg) no-repeat;
margin:auto;
overflow:hidden;
position:relative;
}
#zhuan{
width:450px;
height:450px;
background:url(images/turntable.png) no-repeat;
margin:60px 0px 0px 115px;
transition:all 3s ease 0;
}
#content img{
position:absolute;
top:150px;
left:250px;
cursor:pointer;
}
</style>
< src="js/jquery-1.8.3.min.js"></>
< type="text/java">
$(document).ready(function(e) {
$('#content img').click(function(e) {
var num=Math.floor(Math.random()*3600); //求得随机的旋转度数
$('#zhuan').css('transform','rotate('+num+'deg)');
num%=360; //num=num%360;
setTimeout(function(){
if(num<=51.4*1)
{
alert('免单4999');
}
else if(num<=51.4*2)
{
alert('免单50元')
}
else if(num<=51.4*3)
{
alert('免单10元');
}
else if(num<=51.4*4)
{
alert('免单5元')
}
else if(num<=51.4*5)
{
alert('免分期服务费');
}
else if(num<=51.4*6)
{
alert('提高白条额度');
}
else if(num<=51.4*7)
{
alert('未中奖');
}
},3000)
});
});
</>
<div id="content">
<div id="zhuan"></div>
<img src="images/pointer.png">
</div>
温馨提示
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请后台提交工单处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请后台提交工单！
【免责声明】：
本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
【关于转载】：
本站尊重互联网版权体系，本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读，无任何商业用途，所有内容版权归原作者所有
如本站（文章、内容、图片、视频）任何资料有侵权，先说声抱歉；麻烦您请联系请后台提交工单，我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
注：本站资源来自网络转载，版权归原作者和公司所有，如果有侵犯到您的权益，请第一时间联系我们处理！
-----------------------------------------------------------------------------------------------------------
【版权声明】：
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
三、如有内容侵犯您的版权或其他利益的，请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后，情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » htmlflash代码(html flag)
1 评论