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 下 Nand Flash 驱动主要数据结构说明
s3c2410 专有数据结构 s3c2410_nand_set struct s3c2410_nand_set { int nr_chips; /* 芯片 ...
- Atcoder arc096
C:Half and Half 几个if语句贪心算一算就好了 #include<cstdio> #include<algorithm> using namespace std; ...
- Joomla - 模块系统（新建模块、模块类别、自定义模块）
Joomla - 模块系统,模块配合模板的布局设置.菜单分配.权限分配能创建出一个内容丰富且易于管理的高度自定义前端页面架构 一.新建模块 进入后台,点击顶栏菜单 扩展管理 -> 模块管理 ,进 ...
- Webstorm在MAC下的安装方法
一 .注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址: http://idea.codebeta.cn (新,感谢Rachels ...
- System.Web.Mvc.RedirectToRouteResult.cs
ylbtech-System.Web.Mvc.RedirectToRouteResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutr ...
- php析构函数小结
l 基本语法 class 类名{ public function __destruct(){ //函数体 //析构函数的最重要的作用,就是释放对象创建的资源 //比如 数据库连接, 文件句柄, ...
- mysql80版本—yum安装—图文全过程
这是官网的Quick Giude:https://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 以下为自己安装的步骤: 第一步:下载.rpm安装包 ...
- Python学习day34-面向对象和网络编程总结
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- js的事件的三个阶段,事件委托的原理
DOM2级事件规定的事件流的三个阶段:捕获,目标,冒泡(IE8以及更早版本不支持DOM事件流); 事件流: IE:IE事件流是事件冒泡流 Netscape事件流是事件捕获流 IE事件流 叫做事件冒泡 ...
- java连接SQLserver数据库模板代码
package cn.mldn.lxh.dbc; import java.sql.Connection; import java.sql.DriverManager; public class Dat ...