网页特效：用CSS3制作3D图片立方体旋转特效

<!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图片立方体旋转特效的更多相关文章

制作3D图片立方体旋转特效
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...
CSS3 3D图片立方体旋转
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体效果展示手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览源码下载实现的代码. html代码: <div id= ...
基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...
一款纯css3实现的发光屏幕旋转特效
今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览源码下载实现的代码. html代码: <div class="s ...
css3制作六边形图片
效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>v ...

随机推荐

Mysql 安装-windows X64
1.首先下载mysql文件包 2.将下载到的mysql-5.6.24-x64.zip进行解压. 3.安装,直接下一步. 4.进入文件夹内复制my-default.ini文件,并重命名为my.ini 5 ...
Ubuntu 更新源失败[GPG error]
对于错误 GPG error: http://ppa.launchpad.net precise Release: The following signatures couldn't be verif ...
eclipse下maven项目保持原有目录结构配置resin运行环境
maven项目用起来很方便,但是它的目录结构和eclipse的目录结构是有区别的,故而在eclipse下的maven项目,直接运行调试是有一些问题的. 为了方便maven项目的运行调试,因而也就有了像 ...
[python]获取当前年月
import time time.strftime('%Y%m',time.localtime(time.time()))#获取当前年月
java中Class对象详解和类名.class, class.forName(), getClass()区别
一直在想.class和.getClass()的区别,思索良久,有点思绪,然后有网上搜了搜,找到了如下的一篇文章,与大家分享. 原来为就是涉及到Java的反射----- Java反射学习所谓反射,可以 ...
NOIP2004火星人
法1:裸的全排列加点优化也可以很快---洛谷6ms #include<cstdio> #include<cstring> #include<algorithm> ...
VS2010和opencv-2.4.10、GDAL
系统环境:win10 64位本文只限于学习交流,商业用途请支持正版! 转载请注明:转载请注明http://www.cnblogs.com/mxbs/p/6206060.html 2016 ...
使用python实现appium的屏幕滑动
前些日子写一个滑动手机页面的小脚本,看到大家给的内容都是swipe方法,这里对swipe方法做一个小介绍: Swipe(int start x,int start y,int end x,int y, ...
Core functionality.md
核心功能在Nginx配置文件总可以把配置文件的结构如下: main配置段 event { ... } http { ... server { server_name root location /u ...
YII2如何修改默认控制器/方法
在网上找了非常多的方法,但是都不好使最后自己综合网上所有自己琢磨出来的,见笑了首先Yii2中在/vendor/yiisoft/yii2/web/Application.php的第28行 public ...

网页特效：用CSS3制作3D图片立方体旋转特效

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

随机推荐

热门专题