<!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. IE8 ajax缓存问题

    娘希匹,又遇到缓存问题了. 下面的代码,在其他浏览器都是正常的,但是在IE8中出现诡异问题. $.ajax({ url:dataUrl, data:encodeURI(currentjsonform) ...

  2. 随手小代码——生成GUID

    GUID stGUID; CString strGUID; if (S_OK==::CoCreateGuid(&stGUID)) { strGUID.Format( TEXT("{% ...

  3. 【Linux学习】Linux下用户组、文件权限详解

    原文地址:http://www.cnblogs.com/123-/p/4189072.html Linux下用户组.文件权限详解 用户组 在linux中的每个用户必须属于一个组,不能独立于组外.在li ...

  4. KVM 网络虚拟化基础 - 每天5分钟玩转 OpenStack（9）

    网络虚拟化是虚拟化技术中最复杂的部分,学习难度最大. 但因为网络是虚拟化中非常重要的资源,所以再硬的骨头也必须要把它啃下来. 为了让大家对虚拟化网络的复杂程度有一个直观的认识,请看下图 这是 Open ...

  5. Terminate Instance 操作详解 - 每天5分钟玩转 OpenStack（33）

    本节通过日志详细分析 Nova Terminate 操作. Terminate 操作就是删除 instance,下面是 terminate instance 的流程图 向 nova-api 发送请求 ...

  6. Linux基础命令操作

    显示日期与时间:date date +%Y/%m/%d date +%H:%M 显示日历:cal 显示一整年(cal 2009) 显示一年中的某一个月 (cal [[month]] year) 例如 ...

  7. Fiddler进行模拟Post提交数据，总为null解决方式

    Fiddler模拟post提交时总是为空,解决办法 如果是表单提交则要在header加上 ContentType:application/x-www-form-urlencoded 如果是要post提 ...

  8. CentOS 6.3下Samba服务器的安装与配置

    一.简介 Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,而SMB是Server Message Block的缩写,即为服务器消息块 ,SMB主要是作为Microsoft的 ...

  9. Linux find命令的用法实践

    一.find命令简介 Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大 ...

  10. 探索UDP套接字编程

    UDP和TCP处于同一层网络模型中,也就是运输层,基于二者之上的应用有很多,常见的基于TCP的有HTTP.Telnet等,基于UDP有DNS.NFS.SNMP等.UDP是无连接,不可靠的数据协议服务, ...