sppk.net
当前位置:首页 >> Css动画实现3D旋转相册 >>

Css动画实现3D旋转相册

HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果.今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标多拽从多个角度浏览相册图片,点击图片,就可以放大图片.

<!DOCTYPE html><html><head><title>transform</title><!--我用的谷歌浏览器--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="../scripts/jquery-2.1.1.min.js"></script><script src="../scripts/bootstrap.min.

以下是代码:<!DOCTYPE html><html><head><title>transform-style实现Div的3D旋转-柯乐义</title><style>*{font-size: 24px;color: #00ff00; padding:0; margin:0;}#container { position: relative; height: 300px; width: 300px;-webkit-perspective: 500;

看 css3 transform属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0; padding: 0;} #box{width: 300px; height: 300px; margin: 0 auto; background-color: lightgreen; position: relative;} #inner{

代码如下:<style>*{margin:0;padding:0;}/*简单可以自定义,参照上面*/body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, System;background-color:#FFF;}#imgg{animation:imgg 1s linear 0s infinite;}@

/*以谷歌浏览器为例,实现360度翻转,命名个方法run翻转,调用run,5s周期内实现翻转*/{-webkit-animation: run 10s linear infinite; /*添加动画,动画周期为5s,无限循环*/}@-webkit-keyframes run {0% { /*动画初始状态时元素旋转角度*/-webkit-transform: rotateX(0deg) rotateY(0deg)}100% { /*动画结束状态时元素旋转角度*/-webkit-transform:rotateX(360deg) rotateY(360deg)}}

通过HTML5代码,实现让图片围绕中心点旋转.<!DOCTYPE html><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript"> function fly(){ var myImage=

写了例子,效果不是很好,仅供参考<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IE浏览器CSS transform旋转属性的演示</title> <meta http-equiv="X-UA-

<style>.div1, .div2{ width:80px; height:40px; text-align:center; line-height:40px; background-color:#f88; border:1px solid #666; margin:10px; transition:all 2s; }.div1:hover{ transform:rotate(180deg); }.div2:hover{ transform:rotateY(180deg); }</style><div class=div1>2D旋转</div><div class=div2>3D旋转</div>

网站首页 | 网站地图
All rights reserved Powered by www.sppk.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com