<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>CSS3制作3D图片立方体旋转特效 - 站长素材</title>

<style type="text/css">

html{

    background:linear-gradient(#ff0 0%,#F00 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);

}

</style>

</head>

<body>

<!--/*外层最大容器*/-->

<div class="wrap">

<!--    /*包裹所有元素的容器*/-->

<div class="cube">

    <!--前面图片 -->

    <div class="out_front">

        <img src="../aimg/食材1.jpg"  class="pic">

    </div>

    <!--后面图片 -->

    <div class="out_back">

        <img src="../aimg/食材2.jpg"  class="pic">

    </div>

    <!--左图片 -->

    <div class="out_left">

        <img src="../aimg/食材3.jpg"  class="pic">

    </div>

    <div class="out_right">

        <img src="../aimg/食材4.jpg" class="pic">

    </div>

    <div class="out_top">

        <img src="../aimg/食材5.jpg"  class="pic">

    </div>

    <div class="out_bottom">

        <img src="../aimg/食材6.jpg"  class="pic">

    </div>

    <!--小正方体 -->

    <span class="in_front">

        <img src="../aimg/食材7.jpg" class="in_pic" />

    </span>

    <span class="in_back">

         <img src="../aimg/食材8.jpg" class="in_pic" />

    </span>

    <span class="in_left">

        <img src="../aimg/食材9.jpg" class="in_pic" />

    </span>

    <span class="in_right">

        <img src="../aimg/食材10.jpg" class="in_pic" />

    </span>

    <span class="in_top">

        <img src="../aimg/食材11.jpg" class="in_pic" />

    </span>

    <span class="in_bottom">

        <img src="../aimg/食材12.jpg" class="in_pic" />

    </span>

</div>

</div>

网页特效：用CSS3制作3D图片立方体旋转特效的更多相关文章

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

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

  2. CSS3 3D图片立方体旋转

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

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

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

  4. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  5. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  6. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  7. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  8. 一款纯css3实现的发光屏幕旋转特效

    今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="s ...

  9. css3制作六边形图片

    效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>v ...

随机推荐

  1. 特定IP访问远程桌面

    1. 新建IP安全策略 (远程端口没有修改情况下的设置) WIN+R打开运行对话框,输入“gpedit.msc”进入组策略编辑器. 依次打开:本地计算机策略--计算机配置--Windows设置--安全 ...

  2. makefile之VPATH和vpath的使用

    来自阅读陈皓的<跟我一起写makefile> VPATH变量 在一些大的工程中,有大量的源文件,我们通常的做法是把这许多的源文件分类,并存放在不同的目录中.所以,当 make 需要去找寻文 ...

  3. 【小白的CFD之旅】08 CFD速成之道

    学了那么一个星期的流体力学,又看了一周的计算流体力学,小白对于如何应用CFD解决工程流体问题,依然是一无所知.眼看一个月的时间已经过半,小白有点着急起来.于是在一个阳光明媚的早晨,小白又找到了黄师姐. ...

  4. 虚基类&虚继承

    发现这个月准备竞赛完全没有更新哎... 改了下某华大一c++测试题...网上对虚继承讲的要么太繁琐要么不到位,自力更生 #include<iostream> #include<fst ...

  5. 快速排序（python实现）

    算法导论上的快速排序采用分治算法,步骤如下: 1.选取一个数字作为基准,可选取末位数字 2.将数列第一位开始,依次与此数字比较,如果小于此数,将小数交换到左边,最后达到小于基准数的在左边,大于基准数的 ...

  6. 蓝牙BLE传输性能及延迟分析

    BLE传输性能主要受以下几个因素影响:操作类型,Connection Interval,每个Connection Event内发送的帧数.每一帧数据的长度.具体参见如下链接: https://devz ...

  7. 【Python网络编程】利用Python进行TCP、UDP套接字编程

    之前实现了Java版本的TCP和UDP套接字编程的例子,于是决定结合Python的学习做一个Python版本的套接字编程实验. 流程如下: 1.一台客户机从其标准输入(键盘)读入一行字符,并通过其套接 ...

  8. redis 学习笔记(1)-编译、启动、停止

    一.下载.编译 redis是以源码方式发行的,先下载源码,然后在linux下编译 1.1 http://www.redis.io/download 先到这里下载Stable稳定版,目前最新版本是2.8 ...

  9. Java 数组基础

    数组 数组(Array):相同类型数据的集合. 定义数组 方式1(推荐,更能表明数组类型) type[] 变量名 = new type[数组中元素的个数]; 比如: int[] a = new int ...

  10. RSA加密算法的java实现

    package rsa; import java.security.*;import java.security.interfaces.*;import javax.crypto.*; public ...