网页特效:用CSS3制作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>

 

转载于:https://www.cnblogs.com/xiaofox0018/p/6035294.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/373567.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java中使用Map and Fold进行功能性编程

在函数式编程中&#xff0c;Map和Fold是两个非常有用的运算符&#xff0c;它们属于每种函数式语言。 如果Map和Fold运算符是如此强大且必不可少&#xff0c;那么您如何解释说即使Java编程语言缺少这两个运算符&#xff0c;我们也可以使用Java来完成工作&#xff1f; 事实是&…

Linux 文件压缩解压缩

文章来自&#xff1a;http://www.xuexiyuan.cn/article/detail/53.html *.tar格式 解包1&#xff1a;$ tar -xvf FileName.tar解包2&#xff1a;$ tar -xvf FileName.tar -C DirName# tar解压缩到指定目录打包&#xff1a;$ tar -cvf FileName.tar DirName# tar是打包&#x…

Mysql 分页语句Limit用法

Mysql 分页语句Limit用法 1、Mysql的limit用法 在我们使用查询语句的时候&#xff0c;经常要返回前几条或者中间某几行数据&#xff0c;这个时候怎么办呢&#xff1f;不用担心&#xff0c;mysql已经为我们提供了这样一个功能。 Sql代码 SELECT * FROM table LIMIT [offset,] r…

sqlmap指定cookie_利用SQLMap进行cookie注入

SQLMap被称为注入神器&#xff0c;N多大神都使用SQLmap来进行注入测试&#xff0c;我等小菜当然也会用来装一下A*C&#xff0c;用了N久SQLMAP了&#xff0c;但是极少用 到cookie注入&#xff0c;一遇到cookie注入就去使用注入中转工具&#xff0c;比较麻烦。刚好今天群里的USB问…

c语言else匹配问题

1 #include <stdio.h>2 #include <stdlib.h>3 4 //实现 依次输入三个递增的数 然后正确输出5 6 //为什么得不到我们想要的结果呢 这就是else匹配的问题 当然了 在编译器里面他会自动给你匹配7 //但是如果没有了编译器 笔试的时候呢。。。。8 //原因为&#xff1a;e…

Java:伪造工厂的闭包以创建域对象

最近&#xff0c;我们想要创建一个域对象&#xff0c;该对象需要具有外部依赖关系才能进行计算&#xff0c;并且希望能够在测试中解决该依赖关系。 最初&#xff0c;我们只是在领域类中新建依赖项&#xff0c;但这使得无法在测试中控制其值。 同样&#xff0c;我们似乎不应该将…

利用scp 远程上传下载文件/文件夹

利用scp传输文件 1、从服务器下载文件 scp usernameservername:/path/filename /tmp/local_destination 例如scp codinglog192.168.0.101:/home/kimi/test.txt 把192.168.0.101上的/home/kimi/test.txt 的文件下载到 /tmp/local_destination 2、上传本地文件到服务器 scp /…

KEIL编译错误总结:

1 expected an identifier&#xff1a;#define宏定义常量后&#xff0c;如果再用前面定义的常量作为枚举常量就会报错&#xff0c;方法&#xff0c;去掉#define宏定义 2 ERROR L118: REFERENCE MADE TO ERRONEOUS EXTERNAL 定义的变量和外部声明调用的变量存储类型不一致&#…

视觉平衡与物理平衡_设计中的平衡理论为什么这么重要?

原标题&#xff1a;设计中的平衡理论为什么这么重要&#xff1f;在平面设计中很重要的理论就是关于平衡的应用。无论在logo设计还是网页设计还是海报设计中&#xff0c;一个好的设计一定会兼顾视觉的平衡。今天123标志网就跟大家一起看看平衡的力量。构图平衡主要意味着调整设计…

Tomcat、JDK 历史版本下载地址

Tomcat 历史版本下载地址http://archive.apache.org/dist/tomcat/ JDK 历史版本下载地址 https://www.oracle.com/technetwork/java/javase/archive-139210.html 个人博客&#xff1a;学习园 原文地址&#xff1a;http://www.xuexiyuan.cn/article/detail/190.html

JavaFX移动应用程序最佳实践,第2部分

警告&#xff1a;我在这里给出的技巧对于JavaFX Mobile的当前版本是正确的&#xff0c;该版本是JavaFX 1.1 SDK的一部分。 在将来的版本中&#xff0c;行为将改变&#xff0c;上述工件的当前不良性能将被优化或至少得到显着改善。 我在这里写的所有内容都是快照&#xff0c;不应…

14软件工程第一次作业

你认为一些军事方面的软件系统采用什么样的开发模型比较合适&#xff1f; 我认为设计军事方面的软件采用螺旋式的开发模型比较好。因为螺旋模型减少了过多测试或者是测试不足所带来的风险&#xff0c;能够使软件在无法排除重大风险时有机会停止&#xff0c;减少损失。对于军事方…

波纹扩散_C4D_动画amp;RS波纹扩散效果J_014

C4D-效果扩散效果&#xff0c;Redshift混合冰材质&#xff1b;利用顶点贴图扩散效果制作&#xff0c;RS混合调用顶点贴图。视频教程时长22分钟。对象为可编辑对象才能用顶点贴图。冰结域的扩展是这个动画的重点&#xff0c;在这个模式下&#xff0c;权重会根据半径向外扩展&…

软件测试工程师简历项目经验怎么写?--9999个已成功入职的软件测试工程师真实简历

简历是我们求职的第一步&#xff0c;也是非常重要的一步。 青云叔叔看过太多简历&#xff0c;最快3秒就淘汰一份简历&#xff0c;因为其实我们每天要收到很多简历进行筛选&#xff0c;那么面试官其实也是会很快进行对简历进行判断的&#xff0c;如果你对简历写的一塌糊涂&…

【poj2464】树状数组

这道题。。太特么多细节了。。 题意&#xff1a;在平面直角坐标系中给你N个点&#xff0c;stan和ollie玩一个游戏&#xff0c;首先stan在竖直方向上画一条直线&#xff0c;该直线必须要过其中的某个点&#xff0c;然后ollie在水平方向上画一条直线&#xff0c;该直线的要求是要…

mkdir -p命令

如果要创建目录A并创建目录A的子目录B&#xff0c;没有用-p的情况下mkdir 逐个的创建目录(mkdir A && mkdir A/B); 如果用-p 可以直接创建2个目录 mkdir -p A/B(如果父目录A不存在就创建); 来自个人博客&#xff1a; http://www.xuexiyuan.cn/article/detail/182.html

Eclipse在过去十年中的主要成就

正如我所写的那样 &#xff0c;Eclipse在11月庆祝了10年来的开源和社区。 Eclipse社区已经形成了许多里程碑 &#xff0c;但是主要成就是什么&#xff1f; Eclipse为实际改变软件行业做了什么&#xff1f; 这是Eclipse的一些关键成就。 1.主导的Java IDE。 Eclipse最初是一个非…

azure git怎么使用_Azure(一)Azure Traffic Manager为我们的Web项目提供负载均衡

一&#xff0c;引言上一篇讲到我们将自己的Net Core Web 项目部署到 Azure 的 Web App 的一项 pass 服务&#xff0c;假如随着项目的日益增长的访问量&#xff0c;之前部署到单节点的应用可能无法保证其稳定性&#xff0c;可能会导致系统宕机等等问题&#xff0c;这个时候&…

hiho1257 Snake Carpet

题目链接&#xff1a;http://hihocoder.com/problemset/problem/1257 题目大意&#xff1a;有n条蛇 编号为1-n 每条蛇的长度跟编号相等 奇数编号的蛇必须拐奇数次&#xff08;除了第一条&#xff09;偶数编号的蛇必须拐偶数次&#xff08;除了第二条&#xff09;问能不能在这种…

POJ 3680_Intervals

题意&#xff1a; 给定区间和该区间对应的权值&#xff0c;挑选一些区间&#xff0c;求使得每个数都不被K个区间覆盖的最大权值和。 分析&#xff1a; 如果K1&#xff0c;即为区间图的最大权独立集问题。可以对区间所有端点排序后利用动态规划的方法&#xff0c;设dp[i]为只考虑…