html图片滚动鼠标拖动(html图片滚动鼠标拖动不动)

  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轴(html" class="superseo">百度钱包)

  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;

html图片滚动鼠标拖动(html图片滚动鼠标拖动不动),html图片滚动鼠标拖动(html图片滚动鼠标拖动不动),html图片滚动鼠标拖动,百度,html,java,第1张

  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>

1、本网站名称:源码村资源网
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » html图片滚动鼠标拖动(html图片滚动鼠标拖动不动)

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论