鼠标放上去实现图片旋转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片</title>
<style>
*{
 margin: 0;
 padding: 0;
}
 div{
  width: 500px;
  height: 800px;
  background-image: url(./01.JPG);
  margin: 0 auto;
 }
 #son{
  width: 300px;
  height: 454px;
  background: orange;
  float: right;
  margin-top: 50px;
 }
 li{
  list-style-type: none;
  float: left;
  margin-right: 1px;
 }
 img{
  width: 98px;
 }
 li img{
  transform: rotateX(-135deg) rotate(-270deg);
 }
 #fl{
  width: 100px;
  height: 200px;
  margin: 0 auto;
 }
 #fl img:hover{
  transition-duration: 1s; 　　　　 　　　　 //延时过渡   //要与delay区分
  -moz-transition-duration: 1s; 　　　　　　/* Firefox 4 */
  -webkit-transition-duration: 1s; 　　　　 /* Safari 和 Chrome */
  -moz-transform:rotate(360deg) scale(1.5); -webkit-transform:rotate(360deg) scale(1.5);  　　  //-moz-transform:rotate(360deg)火狐旋转角度   scale(1.5)：图片变大1.5倍
 }
</style>
</head>
 
<body>
    <div>
     <div id="fl"><img src="./03.JPG" /></div>
     
       <li><img src="./01.JPG" /></li>
     
     </div>
    </div>
</body>
</html>

时间： 2024-08-24 16:57:33

鼠标放上去实现图片旋转的相关文章

CSS实现鼠标放图片上显示白色边框+文字描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css 鼠标移动到按钮图片改变

方法一: <style>.pp a {  width:575px;  height:157px;  background:url(1.jpg);/*图片地址*/  display:block; } .pp a:hover {  width:575px;  height:157px;  background:url(2.jpg);/*替换的图片地址*/  display:block; } </style> </head><body> <div class

【图像处理】基于OpenCV底层实现的图片旋转

image processing 系列 [图像处理]直方图匹配 [图像处理]高斯滤波.中值滤波.均值滤波 图片旋转,本质上是对旋转后的图片中每一个像素点计算在原图的位置.然后照搬过来就好. (多说一句.假设计算出来在原图中的位置不是整数而是小数,由于像素点个数都是整数,就须要小数到整数的转换. 这个转换过程是有讲究的,须要用到插值:近期邻插值.双线性插值等等.这里我使用的是最简单的近期邻插值.即对小数四舍五入成整数.C/C++ 实现四舍五入见这里) 完整 github 代码:image-proc

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

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

强大！HTML5 3D美女图片旋转实现教程

又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: 大家也可以在这里看到具体的DEMO演示. 下面我们来分析一下实现这款HTML5 3D图片旋转特效的源代码,这里我们引用了知名的JS动画框架TweenMax.js. 先来看看HTML代码: <ul id="level0" class='cube'> <li class='

图片上传，图片旋转，拖拽

能够支持IE,谷歌,火狐浏览器(兼容多浏览器不容易啊) 下面仅提供核心思想和部分代码:  拖拽:是使用网上现成的JS代码,在此基础上进行适当的修改即可满足自己的需求,最主要的就是判定拖拽的范围,上传的图片不能给拖没了,所以加上个范围限定,判断超出了这个范围便拖拽无效果. 旋转与缩放要区分浏览器.. 旋转:IE浏览器下想要实现图片的旋转很简单只要调用IE提供的滤镜filter参数为一个旋转矩阵即可.谷歌和火狐浏览器图片显示用的是canvas标签而不是img标签所以图片的旋转需要用canvas标签相

Rotating Image Slider - 图片旋转切换特效

非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线演示      下载源码 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件

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 {     

JS框架_(coolShow.js)图片旋转动画特效

coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>coolShow.js插件图片旋转动画特效</title> <link href="css/coolShow.css" rel="