1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.         html,body{  width: 100%;  height: 100%; overflow: hidden }
  8.         *{  margin: 0;  padding: 0;  }
  9.         img{  height: 100%;  width: auto;  max-width: 100%; display: block;margin: 0 auto }
  10.         .content{  width: 100%;height: 100%}
  11.         .main{
  12.             width: 300px;
  13.             height:300px;
  14.             margin: 200px auto;
  15.             perspective:800px;
  16.             -webkit-perspective:800px;
  17.             /*其子元素都会获得透视效果（使用了3D变换的元素）*/
  18.         }
  19.         .box{
  20.             width: 300px;
  21.             height:300px;
  22.             position: absolute;
  23.             left: 0;
  24.             top:0;
  25.             transform-style: preserve-3d;
  26.             /*表示所有子元素在3D空间中呈现*/
  27.         }
  28.         .page1{
  29.             width: 300px;
  30.             height:300px;
  31.             position: absolute;
  32.             left: 0;
  33.             top:0;
  34.         }
  35.         .page2{
  36.             width: 300px;
  37.             height:300px;
  38.             position: absolute;
  39.             left: 0;
  40.             top:0;
  41.             transform: rotateY(90deg);
  42.             transform-origin: left;
  43.         }
  44.         .page3{
  45.             width: 300px;
  46.             height:300px;
  47.             position: absolute;
  48.             left: 0;
  49.             top:0;
  50.             transform: rotateY(-90deg);
  51.             transform-origin: right;
  52.         }
  53.         .page4{
  54.             width: 300px;
  55.             height:300px;
  56.             position: absolute;
  57.             left: 0;
  58.             top:0;
  59.             transform: rotateX(90deg);
  60.             transform-origin: bottom;
  61.         }
  62.         .page5{
  63.             width: 300px;
  64.             height:300px;
  65.             position: absolute;
  66.             left: 0;
  67.             top:0;
  68.             transform: rotateX(-90deg);
  69.             transform-origin: top;
  70.         }
  71.         .page6{
  72.             width: 300px;
  73.             height:300px;
  74.             position: absolute;
  75.             left: 0;
  76.             top:0;
  77.             transform: translateZ(-300px);
  78.         }
  79.         .box{ animation: move-start 15s linear infinite; transform-origin: 50% 50% -150px;}
  80.         @keyframes move-start {
  81.             0% {
  82.                 transform: rotateX(0deg) rotateY(0deg);
  83.             }
  84.             10% {
  85.                 transform: rotateX(0deg) rotateY(180deg);
  86.             }
  87.             20% {
  88.                 transform: rotateX(-180deg) rotateY(180deg);
  89.             }
  90.             30% {
  91.                 transform: rotateX(-360deg) rotateY(180deg);
  92.             }
  93.             40% {
  94.                 transform: rotateX(-360deg) rotateY(360deg);
  95.             }
  96.             50% {
  97.                 transform: rotateX(-180deg) rotateY(360deg);
  98.             }
  99.             60% {
  100.                 transform: rotateX(90deg) rotateY(180deg);
  101.             }
  102.             70% {
  103.                 transform: rotateX(0deg) rotateY(180deg);
  104.             }
  105.             80% {
  106.                 transform: rotateX(90deg) rotateY(90deg);
  107.             }
  108.             90% {
  109.                 transform: rotateX(90deg) rotateY(0deg);
  110.             }
  111.             100% {
  112.                 transform: rotateX(0deg) rotateY(0deg);
  113.             }
  114.         }
  115.     </style>
  116. </head>
  117.  
  118. <body>
  119.  
  120. <!--内容-->
  121. <div class="content">
  122.     <div class="main">
  123.         <div class="box">
  124.                 <div class="page1"><img src="data:images/img1.jpeg" alt=""></div>
  125.                 <div class="page2"><img src="data:images/img2.jpeg" alt=""></div>
  126.                 <div class="page3"><img src="data:images/img3.jpeg" alt=""></div>
  127.                 <div class="page4"><img src="data:images/img4.jpeg" alt=""></div>
  128.                 <div class="page5"><img src="data:images/img5.jpeg" alt=""></div>
  129.                 <div class="page6"><img src="data:images/img6.jpeg" alt=""></div>
  130.         </div>
  131.     </div>
  132. </div>
  133. </body>
  134. </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. Linux 下 Nand Flash 调用关系

    Nand Flash 设备添加时数据结构包含关系 struct mtd_partition        partition_info[] --> struct s3c2410_nand_set ...

  2. html--div里让图片水平居中

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 查看python安装位置和已安装库的相关操作

    打开cmd.exe, *查看python安装位置 where python *查看已安装库 pip list 或者pip freeze *查看可以更新的第三方库 pip list --outdated ...

  4. IDE 插件新版本发布，开发效率 “biu” 起来了

    近日,Cloud Toolkit正式推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件,本文挑选了其中三个重大特性进行解读,点击文末官网跳转链接,可查看详细的版本说明. 本地应用一键 ...

  5. BCB如何编写,调用动态链接库DLL

    一 编写动态链接库DLL DLL简称动态链接库,是Windows中程序的重要组成部分.想象一下,一个程序需要多人共同完成开发,怎么个共同法?这时我们就要考虑把程序分为好几个模块,团队每一个成员开发一个 ...

  6. win10系统，vbox下安装centos6/7，挂载实现目录共享

    用下载好的iso文件,新建虚拟机(所有步骤默认下一步即可). 我用的centos版本:CentOS-7-x86_64-Minimal-1908.iso ISO下载地址 设置虚拟机(指定好镜像后,先不要 ...

  7. freemarker 嵌套循环 （导出word时，修改ftl模板）

    1.循环 (循环输出reportList列表的每行的姓名) <#list reportList as report> ${report.name} </$list> 2.嵌套循 ...

  8. nprogress 转

    转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度 ...

  9. 利用jQuery获取jsonp

    前端js代码: $.ajax({ url: 'http://localhost:8080/webApp/somejsonp', dataType: "jsonp", jsonp: ...

  10. tensorflow的object detection的data augmention的使用

    在protoc的目录下有data augmention的提示,而且注意是repeated,也就是你要这样写: 不能写在一个data_aumentation_options下面,至于有哪些选项可以用,可 ...