html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3制作3D图片立方体旋转特效</title>

    <link rel="stylesheet" href="3d.css">

</head>

<body>

    <div class="wrap">

        <div class="cube">

            <div class="out_front">

                <img src="img/1.png" class="pic">

            </div>

            <div class="out_back">

                <img src="img/2.png" class="pic">

            </div>

            <div class="out_left">

                <img src="img/3.png" class="pic">

            </div>

            <div class="out_right">

                <img src="img/4.png" class="pic">

            </div>

            <div class="out_top">

                <img src="img/5.png" class="pic">

            </div>

            <div class="out_bottom">

                <img src="img/6.png" class="pic">

            </div>

            <span class="in_front">

                <img src="img/7.png" class="in_pic">

            </span>

            <span class="in_back">

                <img src="img/8.png" class="in_pic">

            </span>

            <span class="in_left">

                <img src="img/9.png" class="in_pic">

            </span>

            <span class="in_right">

                <img src="img/10.png" class="in_pic">

            </span>

            <span class="in_top">

                <img src="img/11.png" class="in_pic">

            </span>

            <span class="in_bottom">

                <img src="img/12.png" class="in_pic">

            </span>

        </div>

    </div>

</body>

</html>

css

html{

  background:linear-gradient(#ff0 0%,#000 80%);

    height: 100%;

}

.wrap{

  width: 650px;

  height: 200px;

  margin: 150px 360px;

  position: relative;

}

.cube{

  width: 200px;

  height: 200px;

  margin: 0 auto;

  transform-style: preserve-3d;

  transform: rotateX(-30deg) rotateY(-80deg);

  -webkit-animation: rotate 20s infinite;

  animation-timing-function: linear;

}

@-webkit-keyframes rotate{

  from{transform: rotateX(0deg) rotateY(0deg);}

  to{transform: rotateX(360deg) rotateY(360deg);}

}

.cube div{

  position: absolute;

  width: 200px;

  height: 200px;

  opacity: 0.8;

  transition: all .4s;

}

.pic{

  width: 200px;

  height: 200px;

}

.cube .out_front{

  transform: rotateY(0deg) translateZ(100px);

}

.cube .out_back{

  transform: translateZ(-100px) rotateY(180deg);

}

.cube .out_left{

  transform: rotateY(90deg) translateZ(100px);

}

.cube .out_right{

  transform: rotateY(-90deg) translateZ(100px);

}

.cube .out_top{

  transform: rotateX(90deg) translateZ(100px);

}

.cube .out_bottom{

  transform: rotateX(-90deg) translateZ(100px);

}

.cube span{

  display: bloack;

  width: 100px;

  height: 100px;

  position: absolute;

  top: 50px;

  left: 50px;

}

.cube .in_pic{

  width: 100px;

  height: 100px;

}

.cube .in_front{

  transform: rotateY(0deg) translateZ(50px);

}

.cube .in_back{

  transform: translateZ(-50px) rotateY(180deg);

}

.cube .in_left{

  transform: rotateY(90deg) translateZ(50px);

}

.cube .in_right{

  transform: rotateY(-90deg) translateZ(50px);

}

.cube .in_top{

  transform: rotateX(90deg) translateZ(50px);

}

.cube .in_bottom{

  transform: rotateX(-90deg) translateZ(50px);

}

.cube:hover .out_front{

  transform: rotateY(0deg) translateZ(200px);

}

.cube:hover .out_back{

  transform: translateZ(-200px) rotateY(180deg);

}

.cube:hover .out_left{

  transform: rotateY(90deg) translateZ(200px);

}

.cube:hover .out_right{

  transform: rotateY(-90deg) translateZ(200px);

}

.cube:hover .out_top{

  transform: rotateX(90deg) translateZ(200px);

}

.cube:hover .out_bottom{

  transform: rotateX(-90deg) translateZ(200px);

}

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. Python基础(六) python生成xml测试报告

    思路: 1.使用xslt样式,这样可以很好的和xml结合,做出漂亮的报告 2.生成xml结构 xslt样式是个很有意思,也很强大的,现在用的很多,很方便就能做出一个漂亮的报告,可以百度一下,语法相当简 ...

  2. 命令行下执行python找不包的解决方法

    首先我们来了解一下,为什么会出现这样的问题,以及python搜索包的机制是怎么样的 1.为什么会出现这样的问题? 包是向下搜索机制. 2.为什么ide中执行没有报找不到包的问题? python搜索机制 ...

  3. mariadb安装

    1.配置yum源 基本源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo ...

  4. POJ 1390 Blocks(区间DP)

    Blocks [题目链接]Blocks [题目类型]区间DP &题意: 给定n个不同颜色的盒子,连续的相同颜色的k个盒子可以拿走,权值为k*k,求把所有盒子拿完的最大权值 &题解: 这 ...

  5. 解决：启用多线程调用webBrowsers函数报错：指定的转换无效

    这里就需要委托. 定义一个 委托.加载之后给他绑定一个方法Callback,也就是所说的回掉函数. 然后写一个线程,线程需要一个object 的参数.将你定义的委托当作参数传进线程中的方法. 在线程中 ...

  6. asp.net 经常用到需要判断文本框是否输入的数字是小数，有无正负，几位小数，可以封装一起判断

    /// <summary> /// 判断是否为小数点数字且带符号 /// </summary> /// <param name="symbol"> ...

  7. matlab的Deep Learning的toolbox 中的SAE算法

    最近一直在看Deep Learning,各类博客.论文看得不少 但是说实话,这样做有些疏于实现,一来呢自己的电脑也不是很好,二来呢我目前也没能力自己去写一个toolbox 只是跟着Andrew Ng的 ...

  8. Java-线程间通信小结

    1)方法wait的作用是使当前执行代码的线程进行等待,将当前线程置入预执行队列,并且在wait所在代码行处停止执行,直到接到通知或者中断.在wait之前,要获得一个对象锁,即wait只能在同步方法/块 ...

  9. 第一个Python窗口

    import tkinter def my_window(w, h): ws = root1.winfo_screenwidth(); hs = root1.winfo_screenheight(); ...

  10. Linux机器重启情况查询

    在实际开发过程中,有时可能发现有一些服务器的进程挂了,查询相关错误日志也没有头绪.此时需要考虑是否是由于机器重启导致的错误 使用命令last reboot来查看是否机器自动重启 导致服务器重启的原因有 ...