利用CSS3的transform 3D制作的立方体旋转效果

时间：2022-12-24 11:54:40
 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>3D立方体旋转动画</title>

 <style type="text/css">

 @keyframes rotate{

 %{transform:rotateX(0deg) rotateY(0deg);}

 %{transform:rotateX(360deg) rotateY(360deg);}

 }

 @-webkit-keyframes rotate{

 %{transform:rotateX(0deg) rotateY(0deg);}

 %{transform:rotateX(360deg) rotateY(360deg);}

 }

 html{background:linear-gradient(#ff0 %,#3F9 %);height:%;}

 .wrap{margin:150px auto;perspective:1000px;width:200px;height:200px;}

 .cube{margin:auto;width:200px;height:200px;position:relative;transform-style:preserve-3d;animation:rotate 20s infinite linear;}

 .cube > div{width:%;height:%;position:absolute;background-color:#;opacity:.;border:1px solid #fff;color:#fff;font-size:36px;font-family:"微软雅黑";font-weight:bold;text-align:center;line-height:200px;transition:transform .2s ease-in;-webkit-transition:transform .2s ease-in;}

 .cube > span{display:block;width:100px;height:100px;border:1px solid #;background-color:#;position:absolute;top:50px;left:50px;}

 .cube > span img{width:100px;height:100px;}

 .cube .out-front{transform:translateZ(100px);-moz-transform:translateZ(100px);-webkit-transform:translateZ(100px);}

 .cube .out-back{transform:translateZ(-100px) rotateY(180deg);-moz-transform:translateZ(-100px) rotateY(180deg);-webkit-transform:translateZ(-100px) rotateY(180deg)}

 .cube .out-left{transform:translateX(-100px) rotateY(-90deg);-moz-transform:translateX(-100px) rotateY(-90deg);-webkit-transform:translateX(-100px) rotateY(-90deg);}

 .cube .out-right{transform:translateX(100px) rotateY(90deg);-moz-transform:translateX(100px) rotateY(90deg);-webkit-transform:translateX(100px) rotateY(90deg);}

 .cube .out-top{transform:translateY(-100px) rotateX(90deg);-moz-transform:translateY(-100px) rotateX(90deg);-webkit-transform:translateY(-100px) rotateX(90deg);}

 .cube .out-bottom{transform:translateY(100px) rotateX(-90deg);-moz-transform:translateY(100px) rotateX(-90deg);-webkit-transform:translateY(100px) rotateX(-90deg);}

 .cube .in-front{transform:translateZ(50px);-moz-transform:translateZ(50px);-webkit-transform:translateZ(50px);}

 .cube .in-back{transform:translateZ(-50px) rotateY(180deg);-moz-transform:translateZ(-50px) rotateY(180deg);-webkit-transform:translateZ(-50px) rotateY(180deg)}

 .cube .in-left{transform:translateX(-50px) rotateY(-90deg);-moz-transform:translateX(-50px) rotateY(-90deg);-webkit-transform:translateX(-50px) rotateY(-90deg);}

 .cube .in-right{transform:translateX(50px) rotateY(90deg);-moz-transform:translateX(50px) rotateY(90deg);-webkit-transform:translateX(50px) rotateY(90deg);}

 .cube .in-top{transform:translateY(-50px) rotateX(90deg);-moz-transform:translateY(-50px) rotateX(90deg);-webkit-transform:translateY(-50px) rotateX(90deg);}

 .cube .in-bottom{transform:translateY(50px) rotateX(-90deg);-moz-transform:translateY(50px) rotateX(-90deg);-webkit-transform:translateY(50px) rotateX(-90deg);}

 .wrap:hover .cube .out-front{transform:translateZ(200px);-moz-transform:translateZ(200px);-webkit-transform:translateZ(200px);}

 .wrap:hover .cube .out-back{transform:translateZ(-200px) rotateY(180deg);-moz-transform:translateZ(-200px) rotateY(180deg);-webkit-transform:translateZ(-200px) rotateY(180deg)}

 .wrap:hover .cube .out-left{transform:translateX(-200px) rotateY(-90deg);-moz-transform:translateX(-200px) rotateY(-90deg);-webkit-transform:translateX(-200px) rotateY(-90deg);}

 .wrap:hover .cube .out-right{transform:translateX(200px) rotateY(90deg);-moz-transform:translateX(200px) rotateY(90deg);-webkit-transform:translateX(200px) rotateY(90deg);}

 .wrap:hover .cube .out-top{transform:translateY(-200px) rotateX(90deg);-moz-transform:translateY(-200px) rotateX(90deg);-webkit-transform:translateY(-200px) rotateX(90deg);}

 .wrap:hover .cube .out-bottom{transform:translateY(200px) rotateX(-90deg);-moz-transform:translateY(200px) rotateX(-90deg);-webkit-transform:translateY(200px) rotateX(-90deg);}

 </style>

 </head>

 <body>

 <div class="wrap">

 <div class="cube">

 <div class="out-front"><img src="http://img.hoop8.com/attachments/1602/6421919920043.jpg"></div>

 <div class="out-back"><img src="http://img.hoop8.com/attachments/1602/6821919920043.jpg"></div>

 <div class="out-left"><img src="http://img.hoop8.com/attachments/1602/7231919920043.jpg"></div>

 <div class="out-right"><img src="http://img.hoop8.com/attachments/1602/7591919920043.jpg"></div>

 <div class="out-top"><img src="http://img.hoop8.com/attachments/1602/8111919920043.jpg"></div>

 <div class="out-bottom"><img src="http://img.hoop8.com/attachments/1602/8551919920043.jpg"></div>

 <span class="in-front"><img src="http://img.hoop8.com/attachments/1602/6421919920043.jpg"></span>

 <span class="in-back"><img src="http://img.hoop8.com/attachments/1602/6821919920043.jpg"></span>

 <span class="in-left"><img src="http://img.hoop8.com/attachments/1602/7231919920043.jpg"></span>

 <span class="in-right"><img src="http://img.hoop8.com/attachments/1602/7591919920043.jpg"></span>

 <span class="in-top"><img src="http://img.hoop8.com/attachments/1602/8111919920043.jpg"></span>

 <span class="in-bottom"><img src="http://img.hoop8.com/attachments/1602/8551919920043.jpg"></span>

 </div>

 </div>

 </body>

 </html>

利用CSS3的transform 3D制作的立方体旋转效果的更多相关文章

  1. 用CSS3的transform来做一个立方体

    有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...

  2. CSS3系列之3D制作

    一.序 博主最近这些天,突发奇想的想研究一下CSS3的东西,从而提升一下CSS的能力,在学习的过程中发现其实CSS3是一个挺复杂的东西,深入的研究,你可能会涉及到初中的光学理论来帮助理解一些概念,同时 ...

  3. CSS3系列之3D制作 再研究

    水平翻转效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. css3使用transform属性制作js弹性运动

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. css3实践—创建3D立方体

    css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...

  6. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  7. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  9. 第九章 利用CSS3制作网页动画

    一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...

随机推荐

  1. Linux nfs配置

    ***************节点2的arch2目录挂载到节点1下.那么节点2是主节点1是备******** 10.230.39.234(节点1)cat /etc/exports /arch2 10. ...

  2. State状态设计模式

    1.状态模式:改变对象的行为 一个用来改变类的(状态的)对象. 2:问题:当你自己实现 State 模式的时候就会碰到很多细节的问题,你必须根据自己的需要选择合适的实现方法, 比如用到的状态(Stat ...

  3. Sereja and Suffixes（思维）

    Sereja and Suffixes Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64 ...

  4. Linux下实现视频读取（二）---camera參数设定

    Camera的可设置项极多,V4L2 支持了不少.但Sam之前对这些设置的使用方法和涵义都是在看videodev2.h中边看边理解.感觉很生涩. 直到写这篇blog时,才发现v4l2有专门的SPEC来 ...

  5. codeforces 600E&period; Lomsat gelral 启发式合并

    题目链接 给一颗树, 每个节点有初始的颜色值. 1为根节点.定义一个节点的值为, 它的子树中出现最多的颜色的值, 如果有多种颜色出现的次数相同, 那么值为所有颜色的值的和. 每一个叶子节点是一个map ...

  6. mac下进行配置android真机调试环境

    学习android开发几天了,今天好不容易找了个android手机,直接连接mac电脑,结果eclipse-DDMS里面没有显示任何设备. 使用命令行adb devices 试了下,没设备列表. 郁闷 ...

  7. BestCoder Round &num;89

    过了这么久才来写-- BC的后两道题好难--(第二道题也不怎么简单--) 1001 Fxx and string 正着倒着枚举一次就ok #include<iostream> #inclu ...

  8. 【安卓网络请求开源框架Volley源码解析系列】定制自己的Request请求及Volley框架源码剖析

    通过前面的学习我们已经掌握了Volley的基本用法,没看过的建议大家先去阅读我的博文[安卓网络请求开源框架Volley源码解析系列]初识Volley及其基本用法.如StringRequest用来请求一 ...

  9. loopback（回环）

    Loopback接口是一个虚拟网络接口,在不同的领域,其含义也大不一样. 1．  TCP/IP协议栈中的loopback接口 在TCP/IP中回环设备是一个通过软件实现的虚拟网络接口,它不与任何硬件相 ...

  10. 【MySql】Group By数据分组

    GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. 因为聚合函数通过作用于一组数据而只返回一个单个值, 因此,在SELECT语 ...

相关文章