css3正方体效果
<!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正方体效果的更多相关文章
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- Hover.css：一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- Cool！15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- [HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
- css3 文本效果
CSS3 文本效果 1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...
随机推荐
- php 例子
图片上传 uploadify(flash版是免费的) 12个最好的 HTML5 jQuery 文件上传脚本 20款最好的jQuery文件上传插件
- 数组，List，Set相互转化
1.数组转化为List: String[] strArray= new String[]{"Tom", "Bob", "Jane"}; Li ...
- 2019-9-23-asp-dotnet-core-3.0-接口返回-json-使用-PascalCase-格式
title author date CreateTime categories asp dotnet core 3.0 接口返回 json 使用 PascalCase 格式 lindexi 2019- ...
- 通过ID获取元素 注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id ...
- LOJ#6075. 「2017 山东一轮集训 Day6」重建
题目描述: 给定一个 n个点m 条边的带权无向连通图 ,以及一个大小为k 的关键点集合S .有个人要从点s走到点t,现在可以对所有边加上一个非负整数a,问最大的a,使得加上a后,满足:s到t的最短路长 ...
- LoadRunner参数化详解【转】
距离上次使用loadrunner 已经有一年多的时间了.初做测试时在项目中用过,后面项目中用不到,自己把重点放在了工具之外的东西上,认为性能测试不仅仅是会用工具,最近又想有一把好的利器毕竟可以帮助自己 ...
- Python 的一些方法
有关 Python 内编写类的各种技巧和方法(构建和初始化.重载操作符.类描述.属性访问控制.自定义序列.反射机制.可调用对象.上下文管理.构建描述符对象.Pickling). 你可以把它当作一个教程 ...
- Mysql的数据列类型效率
1. 能短就不要长.(磁盘I/O少一些) 比如固定 长度的CHAR数据列,定义 CHAR(40),而不是 CHAR(255); 比如MEDIUMINT代替BIGINT,数据表就小一些, 值的处理 ...
- CF1166D——数学公式思维题
#include<bits/stdc++.h> using namespace std; #define ll long long ll ans[],a,b,m; /* b=2^(n-2) ...
- 在线Online表单来了！JeecgBoot 2.1 版本发布——基于SpringBoot+AntDesign的快速开发平台
项目介绍 Jeecg-Boot 是一款基于SpringBoot+代码生成器的快速开发平台! 采用前后端分离架构:SpringBoot,Ant-Design-Vue,Mybatis,Shiro,JWT. ...