CSS3三维相册
2016-04-28 13:17
323 查看
听完大宝老师的课程,真心很赞!
经过一点修改,现在就把这个特炫的三维相册分享出来,希望大家喜欢!
下面是截图:
经过一点修改,现在就把这个特炫的三维相册分享出来,希望大家喜欢!
<!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 type="text/css"> * { padding : 0px; margin: 0px; } body { background: url(images/758.jpg) no-repeat top center; } .product { height: 400px; position: fixed; top: 20%; right: 20%; /*视距*/ perspective : 500px; } .scene { height: 250px; width: 250px; transform-style: preserve-3d; transform-origin: 50%; margin: 100px; /*定义一个名为slide的动画*/ animation: slide 12s linear infinite; } .scene ul li { width: 230px; height: 230px; list-style: none; border: 5px solid rgba(255, 255, 255, 0.5); position: absolute; } @keyframes slide{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } } .s1 { float: left; } .s1 ul li:nth-child(1) { transform: rotateY(0deg) translateZ(118px); } .s1 ul li:nth-child(2) { transform: rotateY(90deg) translateZ(118px); } .s1 ul li:nth-child(3) { transform: rotateY(180deg) translateZ(118px); } .s1 ul li:nth-child(4) { transform: rotateY(-90deg) translateZ(118px); } .s2 { float: right; } .s2 ul li:nth-child(1) { transform: rotateY(0deg) translateZ(200px); } .s2 ul li:nth-child(2) { transform: rotateY(90deg) translateZ(200px); } .s2 ul li:nth-child(3) { transform: rotateY(180deg) translateZ(200px); } .s2 ul li:nth-child(4) { transform: rotateY(-90deg) translateZ(200px); } </style> </head> <body> <div class='product'> <!-- scene类是为了修饰两个div的相同点 --> <!-- s1和s2是为了显示两个div的不同,一个左浮动,一个右浮动 --> <div class='scene s1'> <ul> <li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li> <li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li> </ul> </div> <div class='scene s2'> <ul> <li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li> <li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li> </ul> </div> </div> </body> </html>
下面是截图:
相关文章推荐
- selected默认样式
- 【CSS】清浮动的10种方法与利弊分析
- css自动换行
- CSS3 calc()的运用
- css图片
- 图解CSS中position属性的定位用法
- Css中position、float和clear整理
- 使用CSS的position属性控制页面布局的入门教程
- 解析CSS编写中的属性优先级问题
- 详解CSS中的伪类与伪元素及二者间的区别
- 如何解决css帧keyframes在yuicompressor下压缩问题
- CSS层级关系
- ios 找出导航栏下面的黑线(可隐藏,改变样式等)
- css新特性 box-flex/flex 弹性盒状模型
- DIV+CSS颜色边框背景等样式
- 使用 stylelint检查CSS_StyleLint
- css3和js实现重力感应(经测试,andriod4.2支持)
- CSS3新特性,兼容性,兼容方法总结
- CI 里去掉index.php 并 识别css js 文件 技巧
- 《CSS设计指南》笔记--HTML标记与文档结构