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 ...
随机推荐
- android ListView 获取点击的选项
需要调用listView的setOnItemClickListener方法 重写OnItemClickListener类的onItemClick 方法,onItemClick 方法有三个参数 @Ove ...
- Android 开发 Camera1_如何使用对焦功能
前言 Camera1的自动对焦还是有一些坑值得开一个篇幅来讲解,一般对焦Mode有以下几种: Camera.Parameters.FOCUS_MODE_CONTINUOUS_VIDEO 连续自动对焦视 ...
- 查看python安装位置和已安装库的相关操作
打开cmd.exe, *查看python安装位置 where python *查看已安装库 pip list 或者pip freeze *查看可以更新的第三方库 pip list --outdated ...
- 2016.8.18上午纪中初中部NOIP普及组比赛
2016.8.18上午纪中初中部NOIP普及组比赛 链接:https://jzoj.net/junior/#contest/home/1336 翻!车!啦!好吧,那是因为大神归来. 进度: 比赛:AC ...
- 在自己的工程中使用开源界面库Duilib
配置duilib库 一个简单的使用Duilib程序一般要在stdafx.h中进行配置(链接duilib的文件,包括头文件).通常的配置代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 ...
- 使用pageHelper分页查询，报sql语句错误
1.异常详情: 2.异常分析: (1)pageHelper分页大致流程: 配置默认的拦截器:pagehelper.PageInterceptor,对发送的查询语句进行拦截,拦截之后对原有的查询语句进 ...
- Android 之 BroadcaseReceiver
1.在AndroidManifest.xml中注册 <receiver android:name=".MyReceiver"> <intent-filter &g ...
- 深入浅出Mybatis系列（六）---objectFactory、plugins、mappers简介与配置[转]
上篇文章<深入浅出Mybatis系列(五)---TypeHandler简介及配置(mybatis源码篇)>简单看了一下TypeHandler, 本次将结束对于mybatis的配置文件的学习 ...
- Windows进程创建的流程分析
. 创建进程的大体流程: 创建进程的过程就是构建一个环境,这个环境包含了很多的机制 (比如自我保护, 与外界通信等等). 构建这个环境需要两种"人"来协调完成(用户态和内核 ...
- 运行第一个python程序，python 变量，常量，注释
一.运行第一个python程序: print('Hello,world') 保存为.py文件 在cmd窗口: python3x:python py文件路径 回车 python2x:python p ...