<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{ width: 100%; height: 100%; overflow: hidden }
*{ margin: 0; padding: 0; }
img{ height: 100%; width: auto; max-width: 100%; display: block;margin: 0 auto }
.content{ width: 100%;height: 100%}
.main{
width: 300px;
height:300px;
margin: 200px auto;
perspective:800px;
-webkit-perspective:800px;
/*其子元素都会获得透视效果(使用了3D变换的元素)*/
}
.box{
width: 300px;
height:300px;
position: absolute;
left: 0;
top:0;
transform-style: preserve-3d;
/*表示所有子元素在3D空间中呈现*/
}
.page1{
width: 300px;
height:300px;
position: absolute;
left: 0;
top:0;
}
.page2{
width: 300px;
height:300px;
position: absolute;
left: 0;
top:0;
transform: rotateY(90deg);
transform-origin: left;
}
.page3{
width: 300px;
height:300px;
position: absolute;
left: 0;
top:0;
transform: rotateY(-90deg);
transform-origin: right;
}
.page4{
width: 300px;
height:300px;
position: absolute;
left: 0;
top:0;
transform: rotateX(90deg);
transform-origin: bottom;
}
.page5{
width: 300px;
height:300px;
position: absolute;
left: 0;
top:0;
transform: rotateX(-90deg);
transform-origin: top;
}
.page6{
width: 300px;
height:300px;
position: absolute;
left: 0;
top:0;
transform: translateZ(-300px);
}
.box{ animation: move-start 15s linear infinite; transform-origin: 50% 50% -150px;}
@keyframes move-start {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
10% {
transform: rotateX(0deg) rotateY(180deg);
}
20% {
transform: rotateX(-180deg) rotateY(180deg);
}
30% {
transform: rotateX(-360deg) rotateY(180deg);
}
40% {
transform: rotateX(-360deg) rotateY(360deg);
}
50% {
transform: rotateX(-180deg) rotateY(360deg);
}
60% {
transform: rotateX(90deg) rotateY(180deg);
}
70% {
transform: rotateX(0deg) rotateY(180deg);
}
80% {
transform: rotateX(90deg) rotateY(90deg);
}
90% {
transform: rotateX(90deg) rotateY(0deg);
}
100% {
transform: rotateX(0deg) rotateY(0deg);
}
}
</style>
</head> <body> <!--内容-->
<div class="content">
<div class="main">
<div class="box">
<div class="page1"><img src="data:images/img1.jpeg" alt=""></div>
<div class="page2"><img src="data:images/img2.jpeg" alt=""></div>
<div class="page3"><img src="data:images/img3.jpeg" alt=""></div>
<div class="page4"><img src="data:images/img4.jpeg" alt=""></div>
<div class="page5"><img src="data:images/img5.jpeg" alt=""></div>
<div class="page6"><img src="data:images/img6.jpeg" alt=""></div>
</div>
</div>
</div>
</body>
</html>

demo:https://controllerone.github.io/ctrl/3D/box/

css3正方体效果的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. Hover.css:一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  3. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  4. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  5. Cool!15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  6. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  7. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  8. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  9. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

随机推荐

  1. CoreML 简单使用

    今天简单使用了下CoreML , 我的这个模型功能主要是 打开摄像头,然后对准物体,会自动帮我们识别摄像头中的物体,并且给我们大概的百分比值 代码如下: @IBAction func startCli ...

  2. C开发系列-字符串

    C语言字符串 C语言字符串本质是使用字符数组来存储的. #include <stdio.h> int main() { "jake"; // "jake&qu ...

  3. 保持SSH连接的linux服务器不断线

    目录 1. secureCRT和putty连接设置 2. 命令行设置 3. 服务器配置修改 4. 参考 使用ssh连接远程服务器的时候,如果长时间没有操作,远程连接就有可能中断.正在执行的程序和vim ...

  4. Derby的安装与使用

    Derby数据库是一个纯用Java实现的内存数据库,属于Apache的一个开源项目.由于是用Java实现的,所以可以在任何平台上运行:另外一个特点是体积小,免安装,只需要几个小jar包就可以运行了. ...

  5. JavaWeb实现文件下载

    1. 编写文件上传Servlet public class FileUpload1 extends HttpServlet { @Override protected void doGet(HttpS ...

  6. index方法用于数据集的强制索引操作

    index方法为3.2.3版本新增,用于数据集的强制索引操作,例如: $Model->index('user')->select(); 对查询强制使用user索引,user必须是数据表实际 ...

  7. 2-sat——hdu3062

    对于怎么建边还是不太清楚 选了a,那么b c不选,所以连边 选了b或c,那么a必定不选 /* 每个点拆成i*2,i*2+1 队长选,那么队友不选 队长不选,那么队友必定要选 */ #include&l ...

  8. codeforces 514E-Darth Vader and Tree

    题意:有个无限大的有根树,每个节点都有N个孩子,每个孩子距离父亲节点的距离为di.求距离根节点距离<=x的节点个数. 思路:注意观察数据范围,每一个d[i]均小于等于100所以我们可以设dp[i ...

  9. fastjson中List和JSONArray的相互转换

    https://blog.csdn.net/xiaofei__/article/details/89571320 (1)List转换为JSONArray List<T> list = ne ...

  10. java基础之Date类

    Date类: Date类概述 类 Date 表示特定的瞬间,精确到毫秒. 构造方法 public Date() public Date(long date) 成员方法 public long getT ...