<!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. PHP的openssl加密扩展使用小结

    h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...

  2. 为什么 MySQL 回滚事务也会导致 ibd 文件增大？

    一个简单的测试: start transaction; insert into tb1 values(3, repeat('a', 65000),'x',1); --commit; rollback; ...

  3. Snapshot Instance 操作详解 - 每天5分钟玩转 OpenStack（36）

    本节我们通过日志详细讨论 instance 的 snapshot 操作. 有时候操作系统损坏得很严重,通过 Rescue 操作无法修复,那么我们就得考虑通过备份恢复了.当然前提是我们之前对instan ...

  4. Centos7 and docker practices

    1. Failed to get D-Bus connection: Operation not permitted error when you execute the systemctl star ...

  5. JAVA类的静态加载和动态加载以及NoClassDefFoundError和ClassNotFoundException

    我们都知道Java初始化一个类的时候可以用new 操作符来初始化, 也可通过Class.forName()的方式来得到一个Class类型的实例,然后通过这个Class类型的实例的newInstance ...

  6. 在线倍增法求LCA专题

    1.cojs 186. [USACO Oct08] 牧场旅行 ★★   输入文件:pwalk.in   输出文件:pwalk.out   简单对比时间限制:1 s   内存限制:128 MB n个被自 ...

  7. 2016.10.29 NOIP模拟赛 PM 考试整理

    300分的题,只得了第三题的100分. 题目+数据:链接:http://pan.baidu.com/s/1o7P4YXs 密码:4how T1:这道题目存在着诸多的问题: 1.开始的序列是无法消除的( ...

  8. java怎么导入一个项目到eclipse

    http://jingyan.baidu.com/article/48b37f8d649de31a646488e8.html点击左上角菜单栏file--import选择existing project ...

  9. 苹果iOS强制HTTPS迫在眉睫，距离2017年只剩1天，准备好了么？

    其实不久前苹果就发了通告,要求ios上的应用全部以HTTPS来进行接口调用以及数据访问,这样做是为了数据安全,一方面为了自己,另一方面也是对应用的要求更加严格,这么做很好,也加强了市场app的规范,虽 ...

  10. [tem]RMQ(st)

    倍增思想 代码中有两个测试 #include <iostream> #include <cmath> using namespace std; const int N=1e5; ...