制作3D图片立方体旋转特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3制作3D图片立方体旋转特效 - 站长素材</title>
<style type="text/css"> html{
background:linear-gradient(#ff0 0%,#F00 80%);
height: 100%;
} .wrap{
width: 650px;
height: 200px;
margin: 150px 360px;
position: relative; }
.cube{
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
.pic{
width: 200px;
height: 200px;
}
.cube .out_front{
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
.cube span{
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic{
width: 100px;
height: 100px;
}
.cube .in_front{
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(50px);
}
.cube:hover .out_front{
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
</style>
</head>
<body>
<!--/*外层最大容器*/-->
<div class="wrap">
<!-- /*包裹所有元素的容器*/-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="../aimg/食材1.jpg" class="pic">
</div>
<!--后面图片 -->
<div class="out_back">
<img src="../aimg/食材2.jpg" class="pic">
</div>
<!--左图片 -->
<div class="out_left">
<img src="../aimg/食材3.jpg" class="pic">
</div>
<div class="out_right">
<img src="../aimg/食材4.jpg" class="pic">
</div>
<div class="out_top">
<img src="../aimg/食材5.jpg" class="pic">
</div>
<div class="out_bottom">
<img src="../aimg/食材6.jpg" class="pic">
</div>
<!--小正方体 -->
<span class="in_front">
<img src="../aimg/食材7.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="../aimg/食材8.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="../aimg/食材9.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="../aimg/食材10.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="../aimg/食材11.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="../aimg/食材12.jpg" class="in_pic" />
</span>
</div>
</div>
</body>
</html>
制作3D图片立方体旋转特效的更多相关文章
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS3 3D图片立方体旋转
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- 用css实现3D立方体旋转特效
先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...
- css实现3D立方体旋转特效
先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
随机推荐
- 实现listview中checkbox的多选与记录
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...
- Loadrunner中web_reg_save_param的使用详解
[摘要]利用实际案例说明如何使用Mercury LoadRunner提取包含在HTML页内的动态信息并创建参数. [关键词]性能测试,压力测试,Mercury LoadRunner 应用范围 在使用L ...
- Linux常用命令_(系统管理)
用户管理:useradd.passwd.userdel用户组管理:groupadd.groupdel.gpasswd系统信息:uname.who.whoami.id登录注销:login.logout. ...
- 16.2.13 asp.net 学习随笔
using System.Data.SqlClient;//连接数据库必须的 using System.Configuration; CommandType所在的命名空间 system.data; P ...
- 暴力+降复杂度 BestCoder Round #39 1002 Mutiple
题目传送门 /* 设一个b[]来保存每一个a[]的质因数的id,从后往前每一次更新质因数的id, 若没有,默认加0,nlogn复杂度: 我用暴力竟然水过去了:) */ #include <cst ...
- 计算几何 HDOJ 4720 Naive and Silly Muggles
题目传送门 /* 题意:给三个点求它们的外接圆,判断一个点是否在园内 计算几何:我用重心当圆心竟然AC了,数据真水:) 正解以后补充,http://www.cnblogs.com/kuangbin/a ...
- PHP中常见的页面跳转方法
转载自冠威博客 [ http://www.guanwei.org/ ]本文链接地址:http://www.guanwei.org/post/PHPnotes/04/php-redirect-metho ...
- android怎样调用@hide和internal API
android怎样调用@hide和internal API 2012-12-11 16:21 8772人阅读 评论(3) 收藏 举报 分类: Android开发(277) Android有两种类型 ...
- winform学习1-----理解小概念-20160506
panel属性,dock:获取或设置控件停靠到父容器的哪一个边缘. none,right,left,fill(完全填充),top C#默认窗体大小设置:maximumsize 窗体最大值 minimu ...
- SVN 中trunk、branches、tags
SVN 中trunk.branches.tags 我们在一些著名开源项目的版本库中,通常可以看到trunk, branches, tags等三个目录.由于SVN固有的特点,目录在SVN中并没有特别 ...