css3 实现图片旋转

今天发现一个很好玩的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-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css3鼠标悬停背景做360°旋转效果</title>

<style>
* {
    margin:0;
    padding:0;
    list-style:none;
}
body {
    background:#1F1F1F;
}
.character360 {
    width: 220px;
    height: 220px;
    margin: 40px auto 0 auto;
    background: no-repeat url("images/author.jpg") left top;
    webkit-background-size: 220px 220px;
    -moz-background-size: 220px 220px;
    background-size: 220px 220px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
}
.character360:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
</style>

</head>
<body>

    <div class="character360"></div>

</body>
</html>

只适应于css3浏览器

下面来讲解一下css3的transform功能:

transform的含义:改变,使…变形;转换它的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

transform:rotate():

含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew():

含义:倾斜;

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale():

含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate():

含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

transform综合:

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0)translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0)translate(100px,0)}


不得不说,前端开发比后端开发有意思的多!

时间: 2024-10-05 04:58:23

css3 实现图片旋转的相关文章

基于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

【js】js 让图片旋转

 转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta + ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta + ",SizingMe

CSS3实现图片放大旋转

知识点: css3动画 transition /*旋转动画*/ @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } 效果: 源码: ----------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo

关于css3图片旋转transform:rotate()问题总结

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

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 {     

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

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

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

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

网页中图片旋转的几种实现方式

网页中图片旋转一般有下面三种常见的实现方式: 一. ie 滤镜 IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角.rotation可以有4个旋转值:0, 1, 2,和3分别表示将元素旋转0度.90度.180度.270度. 浏览器支持: IE5.5+ CSS代码: .rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } JS

JS+css3实现图片画廊效果总结

最近学习一个在线小项目,用JS+css3实现图片画廊的效果,具体效果可以点击以下链接查看: http://1.danielcv.sinaapp.com/ 案例中主要用到一些新的CSS3效果比如:1.3D视图位置设置和子元素3D支持 -webkit-perspective:800px;/*若设置为0px则不支持3D透视功能*/ -webkit-transform-style:preserve-3d; 2.翻转为不可见时隐藏 -webkit-backface-visibility:hidden; 3