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 ...
随机推荐
- linux 文件类型的颜色
linux文件颜色的含义:蓝色代表目录 绿色代表可执行文件 红色表示压缩文件 浅蓝色表示链接文件 灰色表示其他文件 红色闪烁表示链接的文件有问题了 黄色表示设备文件 蓝色文件----------目录 ...
- 关于java 线程的停止同时用 interrupt 和 join 的作用
/** * @FileName: ThreadTest.java * @Description: * @Author : xingchong * @CreateTime: Sep 22, 2018 1 ...
- [洛谷P3672]小清新签到题
题目描述 题目还是简单一点好. 给定自然数n.k.x,你要求出第k小的长度为n的逆序对对数为x的1~n的排列a1,a2...an,然后用仙人图上在线分支定界启发式带花树上下界最小费用流解决问题,保证存 ...
- centos6 php5.4 升級到php 5.6
因Centos6中的PHP版本有点底,需要升级PHP版本 [vagrant@localhost ~]$ php -v PHP 5.4.45 (cli) (built: Sep 30 2015 15:0 ...
- Django问题2
接触django是从上个月开始,学习python时间也不长,但我经常在社区看看别人发表的文章,早上看到一篇不错的博客,却一直不能访 问,最终从bing的缓存里找到,因为害怕丢失和忘掉,所以顺便翻译过来 ...
- Zuul上传文件
对于1M以内的文件上传,无需任何处理,大文件10M以上需要为上传路径添加/zuul前缀,也可使用zuul.servlet-path自定义前缀 如果Zuul使用了Ribbon做负载均衡,那么对于超大的文 ...
- mysql order by排序查询速度问题
SELECT * FROM `assets_message` LEFT JOIN purchase_message ON assets_message.purchase_id = purchase_m ...
- 小米手机的miui10 连接电脑。本地播放器推荐。
问题: 电脑连接了手机却不能看到手机里面的文件. 方法一 方法二 连接和电脑一样的wifi 进入文件管理 来自:百度经验. 本地播放器推荐 爱奇艺万能播放器(还不错,目前在用).qq影音 爱奇艺万能播 ...
- Django项目: 项目环境搭建 ---- 二、django项目设置
1.配置模板文件 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.p ...
- css3 做border = 0.5px的细线
参考: https://blog.csdn.net/Tyro_java/article/details/52013531