html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>CSS3制作3D图片立方体旋转特效</title>
  6.     <link rel="stylesheet" href="3d.css">
  7. </head>
  8. <body>
  9.     <div class="wrap">
  10.         <div class="cube">
  11.             <div class="out_front">
  12.                 <img src="img/1.png" class="pic">
  13.             </div>
  14.             <div class="out_back">
  15.                 <img src="img/2.png" class="pic">
  16.             </div>
  17.             <div class="out_left">
  18.                 <img src="img/3.png" class="pic">
  19.             </div>
  20.             <div class="out_right">
  21.                 <img src="img/4.png" class="pic">
  22.             </div>
  23.             <div class="out_top">
  24.                 <img src="img/5.png" class="pic">
  25.             </div>
  26.             <div class="out_bottom">
  27.                 <img src="img/6.png" class="pic">
  28.             </div>
  29.             <span class="in_front">
  30.                 <img src="img/7.png" class="in_pic">
  31.             </span>
  32.             <span class="in_back">
  33.                 <img src="img/8.png" class="in_pic">
  34.             </span>
  35.             <span class="in_left">
  36.                 <img src="img/9.png" class="in_pic">
  37.             </span>
  38.             <span class="in_right">
  39.                 <img src="img/10.png" class="in_pic">
  40.             </span>
  41.             <span class="in_top">
  42.                 <img src="img/11.png" class="in_pic">
  43.             </span>
  44.             <span class="in_bottom">
  45.                 <img src="img/12.png" class="in_pic">
  46.             </span>
  47.         </div>
  48.     </div>
  49. </body>
  50. </html>

css

  1. html{
  2.   background:linear-gradient(#ff0 0%,#000 80%);
  3.     height: 100%;
  4. }
  5. .wrap{
  6.   width: 650px;
  7.   height: 200px;
  8.   margin: 150px 360px;
  9.   position: relative;
  10.  
  11. }
  12.  
  13. .cube{
  14.   width: 200px;
  15.   height: 200px;
  16.   margin: 0 auto;
  17.   transform-style: preserve-3d;
  18.   transform: rotateX(-30deg) rotateY(-80deg);
  19.   -webkit-animation: rotate 20s infinite;
  20.   animation-timing-function: linear;
  21. }
  22. @-webkit-keyframes rotate{
  23.   from{transform: rotateX(0deg) rotateY(0deg);}
  24.   to{transform: rotateX(360deg) rotateY(360deg);}
  25. }
  26. .cube div{
  27.   position: absolute;
  28.   width: 200px;
  29.   height: 200px;
  30.   opacity: 0.8;
  31.   transition: all .4s;
  32. }
  33.  
  34. .pic{
  35.   width: 200px;
  36.   height: 200px;
  37. }
  38. .cube .out_front{
  39.   transform: rotateY(0deg) translateZ(100px);
  40. }
  41. .cube .out_back{
  42.   transform: translateZ(-100px) rotateY(180deg);
  43. }
  44. .cube .out_left{
  45.   transform: rotateY(90deg) translateZ(100px);
  46. }
  47. .cube .out_right{
  48.   transform: rotateY(-90deg) translateZ(100px);
  49. }
  50. .cube .out_top{
  51.   transform: rotateX(90deg) translateZ(100px);
  52. }
  53. .cube .out_bottom{
  54.   transform: rotateX(-90deg) translateZ(100px);
  55. }
  56.  
  57. .cube span{
  58.   display: bloack;
  59.   width: 100px;
  60.   height: 100px;
  61.   position: absolute;
  62.   top: 50px;
  63.   left: 50px;
  64. }
  65. .cube .in_pic{
  66.   width: 100px;
  67.   height: 100px;
  68. }
  69. .cube .in_front{
  70.   transform: rotateY(0deg) translateZ(50px);
  71. }
  72. .cube .in_back{
  73.   transform: translateZ(-50px) rotateY(180deg);
  74. }
  75. .cube .in_left{
  76.   transform: rotateY(90deg) translateZ(50px);
  77. }
  78. .cube .in_right{
  79.   transform: rotateY(-90deg) translateZ(50px);
  80. }
  81. .cube .in_top{
  82.   transform: rotateX(90deg) translateZ(50px);
  83. }
  84. .cube .in_bottom{
  85.   transform: rotateX(-90deg) translateZ(50px);
  86. }
  87.  
  88. .cube:hover .out_front{
  89.   transform: rotateY(0deg) translateZ(200px);
  90. }
  91. .cube:hover .out_back{
  92.   transform: translateZ(-200px) rotateY(180deg);
  93. }
  94. .cube:hover .out_left{
  95.   transform: rotateY(90deg) translateZ(200px);
  96. }
  97. .cube:hover .out_right{
  98.   transform: rotateY(-90deg) translateZ(200px);
  99. }
  100. .cube:hover .out_top{
  101.   transform: rotateX(90deg) translateZ(200px);
  102. }
  103. .cube:hover .out_bottom{
  104.   transform: rotateX(-90deg) translateZ(200px);
  105. }

CSS3 3D图片立方体旋转的更多相关文章

  1. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  2. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 制作3D图片立方体旋转特效

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

  4. 超绚丽CSS3多色彩发光立方体旋转动画

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...

  5. CSS3实现图片循环旋转

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 利用CSS3给图片添加旋转背景特效

    首先看旋转特效:http://***/demo/201512/2015-12-09-css3-image-hover-animate/index.html 这是一款纯CSS3实现的当鼠标滑过图片时文字 ...

  7. 手把手教你玩转CSS3 3D技术

    手把手教你玩转 CSS3 3D 技术   要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...

  8. 纯CSS3实现超立体的3D图片侧翻倾斜效果

    看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图.那么接下来我们分析一下源码吧,显示html代码,非常简单: ...

  9. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

随机推荐

  1. 手动创建Oracle实例

    手工建库步骤 Step 1: Specify an Instance Identifier (SID)(指定一个实例的标识符SID)Step 2: Ensure That the Required E ...

  2. new Date() IE浏览器下不起做用的解决方法

    因为需要计算两个时间之间的差值,所以我用了new Date().getTime()来算的两个时间的时间戳,后来突然发现IE浏览器算的值是NaN. 下面是我在Ie浏览器下打印的结果: 我发现如果不加时分 ...

  3. FB面经Prepare: Friends Recommendation

    有个getFriend() API, 让你推荐你的朋友的朋友做你的朋友,当然这个新朋友不能是你原来的老朋友 package fb; import java.util.*; public class R ...

  4. python数据类型之集合类型

    一.集合的作用 知识点回顾:可变类型是不可hash类型,不可变类型是可hash类型 作用:去重,关系运算 定义:可以包含多个元素,用逗号分割,集合的元素遵循三个原则: 1.每个元素必须是不可变类型(可 ...

  5. （.NET高级课程笔记）委托、事件总结

      1.委托的声明.实例化和调用 同样的,也可以把事务写成上面的形式 2.泛型委托---Func.Action 3.委托的意义:解耦 4.委托的意义:异步多线程 5.委托的意义:多播委托 6.观察者模 ...

  6. [阿里云] 云数据库mongodb外网连接

    原教程,https://www.alibabacloud.com/help/zh/doc-detail/55253.htm 但按照这里的教程,还是连不上mongdb,甚至在ECS上也ping不通mon ...

  7. Dapper 批量插入

    环境 Mssql 自带的Dapper.Net 批量插入 是一条条循环插入 这里改成了单条 Ps:主要此方法要控制字符串长度哦,每个数据库对单条sql字符长度的限制是不一样的. /// <summ ...

  8. cookie和sission的原理及异同

    Cookie Cookie是存储在客户机的文本文件,它们保存了大量轨迹信息.在servlet技术基础上,JSP显然能够提供对HTTP cookie的支持. 通常有三个步骤来识别回头客: 服务器脚本发送 ...

  9. Linux串口通信之termios结构体说明

    termios结构体中,该结构体一般包括如下的成员:tcflag_t c_iflag;      tcflag_t c_oflag;      tcflag_t c_cflag;      tcfla ...

  10. ROS之坑

    我使用ROS建图的时候,用的是Kinect的深度信息转换成laser scan,Rviz仿真环境调用出laser scan信息的时候显示如下错误: Transform [sender=unknown_ ...