<!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. MySQL性能优化——索引

    原文地址:http://blog.codinglabs.org/articles/theory-of-mysql-index.html InnoDB使用B+Tree作为索引结构 最左前缀原理与相关优化 ...

  2. 修改AndroidStudio中的Logcat中的默认设置

    按Ctrl+Alt+S打开Settings 在左上角的输入框中输入Locat 点右边的使用内部样式取消掉,好了,开始自定义吧.

  3. Windows批处理：配置防火墙规则、开启远程桌面

    一.简介 公司主机加入域后,防火墙未进行设置,规则不统一,不少主机ping不通.另打算开启远程桌面,方便远程管理网内每台主机.曾在DC上测试过域组策略内的Windows防火墙设置,无论是新增规则还是直 ...

  4. Linux驱动开发概述

    原文出处:http://www.cnblogs.com/jacklu/p/4722563.html Linux设备分类 设备的驱动程序也要像裸机程序那样进行一些硬件操作,不同的是驱动程序需要" ...

  5. switch与ifelse的效率问题

    switch...case与if...else的根本区别在于,switch...case会生成一个跳转表来指示实际的case分支的地址,而这个跳转表的索引号与switch变量的值是相等的.从而,swi ...

  6. Mysql日志解析

    修改Mysql配置 Mysql配置地址为: C:\Program Files (x86)\MySQL\MySQL Server 5.5 如果无法修改可以把my.ini拷贝出来,修改完后,再拷贝回去! ...

  7. 【2016-10-17】【坚持学习】【Day9】【反射】

    3个主要命名空间 System.Type System.Reflection System.Reflection.Assembly 2个主要类 System.Type System.Reflectio ...

  8. python3下urlopen解析中文url编码错误

    这是在ipython下测试的结果: In [24]: x Out[24]: 'http://127.0.0.1:8000/xxx/?id=a45ex0bad3c9&game=五子棋' In [ ...

  9. Linux下管道编程

    功能: 父进程创建一个子进程父进程负责读用户终端输入,并写入管道 子进程从管道接收字符流写入另一个文件 代码: #include <stdio.h> #include <unistd ...

  10. 解决“只能通过Chrome网上应用商店安装该程序”的方法

    摘要 : 最近有些用户反映某个Chrome插件在安装的时候,提示"只能通过Chrome网上应用商店安装该程序",为了解决这一问题,Chrome插件网带来了相关的解决方法. 某些用户 ...