[原][CSS3]会动的盒子机器人

[PC与移动端皆可]会动的盒子机器人

浏览器必须可以解析perspective属性。

在线：http://wangxinsheng.herokuapp.com/boxMan

代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>[WXS]盒子机器人</title>

 <meta name="author" content="WangXinsheng">

 <meta name="apple-mobile-web-app-capable" content="yes">

 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no">

 <meta http-equiv="X-UA-Compatible" content="chrome=1">

 </head>

 <style>

 * {

   -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

   box-sizing: border-box;

 }

 body {

   height: 10em;

   left: 50%;

   margin-left: -5em;

   margin-top: -5em;

   /*perspective:设置元素被查看位置的视图*/

   -webkit-perspective: 1000px;

   -ms-perspective: 1000px;

   perspective: 1000px;

   /*perspective-origin/-webkit-perspective-origin:设置 3D 元素的基点位置*/

   position: absolute;

   top: 50%;

   width: 10em;

 }

 cube{

   position: absolute;

   -webkit-transform-style: preserve-3d;

   -ms-transform-style: preserve-3d;

   transform-style: preserve-3d;

   -webkit-transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg);

   transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg);

 }

 cube * {

 background-image: -webkit-radial-gradient(rgba(202,184,160,1),rgba(183,154,112,1));

   border: 2px solid rgba(183,154,112,1);

   position: absolute;

   display: block;

 }

 cube.header {

   height: 8em;

   width: 13em;

   background:none;

   border:none;

   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

   transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

 }

 cube.header back {

   height: 8em;

   width: 13em;

   -webkit-transform: rotateX(180deg) translateZ(4em);

   -ms-transform: rotateX(180deg) translateZ(4em);

   transform: rotateX(180deg) translateZ(4em);

 }

 cube.header bottom {

   height: 8em;

   width: 13em;

   -webkit-transform: rotateX(-90deg) translateZ(4em);

   -ms-transform: rotateX(-90deg) translateZ(4em);

   transform: rotateX(-90deg) translateZ(4em);

   display:none;

 }

 cube.header front {

   height: 8em;

   width: 13em;

   -webkit-transform: rotateY(0deg) translateZ(4em);

   -ms-transform: rotateY(0deg) translateZ(4em);

   transform: rotateY(0deg) translateZ(4em);

   background:url('img/headerFront.png') no-repeat rgb(202,184,160);

   -moz-background-size:cover;

   -webkit-background-size:cover;

   -o-background-size:cover;

   background-size:cover;

 }

 cube.header left {

   height: 8em;

   width: 8em;

   -webkit-transform: rotateY(-90deg) translateZ(4em);

   -ms-transform: rotateY(-90deg) translateZ(4em);

   transform: rotateY(-90deg) translateZ(4em);

 }

 cube.header right {

   height: 8em;

   width: 8em;

   -webkit-transform: rotateY(90deg) translateZ(9em);

   -ms-transform: rotateY(90deg) translateZ(9em);

   transform: rotateY(90deg) translateZ(9em);

 }

 cube.header top {

   height: 8em;

   width: 13em;

   -webkit-transform: rotateX(90deg) translateZ(4em);

   -ms-transform:rotateX(90deg) translateZ(4em);

   transform: rotateX(90deg) translateZ(4em);

 }

 /*------------------------------*/

 cube.body.body {

   height: 10em;

   width: 6em;

   background:none;

   border:none;

   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

   transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

 }

 cube.body.body back {

   height: 10em;

   width: 6em;

   -webkit-transform: rotateX(180deg) translateZ(3em);

   -ms-transform: rotateX(180deg) translateZ(3em);

   transform: rotateX(180deg) translateZ(3em);

 }

 cube.body.body bottom {

   height: 6em;

   width: 6em;

   -webkit-transform: rotateX(-90deg) translateZ(7em);

   -ms-transform: rotateX(-90deg) translateZ(7em);

   transform: rotateX(-90deg) translateZ(7em);

 }

 cube.body.body front {

   height: 10em;

   width: 6em;

   -webkit-transform: rotateY(0deg) translateZ(3em);

   -ms-transform: rotateY(0deg) translateZ(3em);

   transform: rotateY(0deg) translateZ(3em);

   background-color:rgb(202,184,160,1);

   background:url('img/bodyFront.png') no-repeat rgb(202,184,160);;

   -moz-background-size:cover;

   -webkit-background-size:cover;

   -o-background-size:cover;

   background-size:cover;

 }

 cube.body.body left {

   height: 10em;

   width: 6em;

   -webkit-transform: rotateY(-90deg) translateZ(3em);

   -ms-transform: rotateY(-90deg) translateZ(3em);

   transform: rotateY(-90deg) translateZ(3em);

 }

 cube.body.body right {

   height: 10em;

   width: 6em;

   -webkit-transform: rotateY(90deg) translateZ(3em);

   -ms-transform: rotateY(90deg) translateZ(3em);

   transform: rotateY(90deg) translateZ(3em);

 }

 cube.body.body top {

   height: 6em;

   width: 6em;

   -webkit-transform: rotateX(90deg) translateZ(3em);

   -ms-transform: rotateX(90deg) translateZ(3em);

   transform: rotateX(90deg) translateZ(3em);

 }

 /*------------------------------*/

 cube.hand {

   height: 8em;

   width: 3em;

   background:none;

   border:none;

   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

   transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

 }

 cube.hand back {

   height: 8em;

   width: 3em;

   -webkit-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);

   -ms-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);

   transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);

 }

 cube.hand bottom {

   height: 3em;

   width: 3em;

   -webkit-transform: rotateX(-90deg) translateZ(9.5em);

   -ms-transform: rotateX(-90deg) translateZ(9.5em);

   transform: rotateX(-90deg) translateZ(9.5em);

 }

 cube.hand front {

   height: 8em;

   width: 3em;

   -webkit-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);

   -ms-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);

   transform: rotateY(0deg) translateZ(1.5em) translateY(3em);

 }

 cube.hand left {

   height: 8em;

   width: 3em;

   -webkit-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);

   -ms-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);

   transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);

 }

 cube.hand right {

   height: 8em;

   width: 3em;

   -webkit-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);

   -ms-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);

   transform: rotateY(90deg) translateZ(1.5em) translateY(3em);

 }

 cube.hand top {

   height: 3em;

   width: 3em;

   -webkit-transform: rotateX(90deg) translateZ(-1.5em);

   -ms-transform: rotateX(90deg) translateZ(-1.5em);

   transform: rotateX(90deg) translateZ(-1.5em);

 }

 /*------------------------------*/

 cube.foot {

   height: 8em;

   width: 2.5em;

   background:none;

   border:none;

   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

   transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

 }

 cube.foot back {

   height: 8em;

   width: 2.5em;

   -webkit-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);

   -ms-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);

   transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);

 }

 cube.foot bottom {

   height: 5.5em;

   width: 2.5em;

   -webkit-transform: rotateX(-90deg) translateZ(8.2em);

   -ms-transform: rotateX(-90deg) translateZ(8.2em);

   transform: rotateX(-90deg) translateZ(8.2em);

 }

 cube.foot front {

   height: 8em;

   width: 2.5em;

   -webkit-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);

   -ms-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);

   transform: rotateY(0deg) translateZ(2.75em) translateY(3em);

 }

 cube.foot left {

   height: 8em;

   width: 5.5em;

   -webkit-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);

   -ms-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);

   transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);

 }

 cube.foot right {

   height: 8em;

   width: 5.5em;

   -webkit-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);

   -ms-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);

   transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);

 }

 cube.foot top {

   height: 5.5em;

   width: 2.5em;

   -webkit-transform: rotateX(90deg) translateZ(-0.25em);

   -ms-transform: rotateX(90deg) translateZ(-0.25em);

   transform: rotateX(90deg) translateZ(-0.25em);

 }

 /*------------------------------*/

 cube.dress {

   height: 3em;

   width: 6em;

   background:none;

   border:none;

   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

   transform: translateZ(0em) rotateX(0deg) rotateY(0deg);

 }

 cube.dress back {

   height: 3em;

   width: 6em;

   -webkit-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);

   -ms-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);

   transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);

 }

 cube.dress front {

   height: 3em;

   width: 6em;

   -webkit-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);

   -ms-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);

   transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);

 }

 cube.dress left {

   height: 3em;

   width: 6em;

   -webkit-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);

   -ms-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);

   transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);

 }

 cube.dress right {

   height: 3em;

   width: 6em;

   -webkit-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);

   -ms-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);

   transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);

 }

 /*------------animate-------------*/

 /*--------------------*/

 .lHand{

     animation: lhand 2s infinite linear;

     -moz-animation: lhand 2s infinite linear;    /* Firefox */

     -webkit-animation: lhand 2s infinite linear;    /* Safari 和 Chrome */

     -webkit-animation-direction:alternate;

 }

 @keyframes lhand

 {

 from {

   transform: rotateX(-50deg) rotateZ(-5deg);

   }

 to {

   transform: rotateX(50deg) rotateZ(5deg);

   }

 }

 @-moz-keyframes lhand /* Firefox */

 {

 from {

   -moz-transform: rotateX(-50deg) rotateZ(-5deg);

   }

 to {

   -moz-transform: rotateX(50deg) rotateZ(5deg);

   }

 }

 @-webkit-keyframes lhand /* Safari 和 Chrome */

 {

 from {

   -webkit-transform: rotateX(-50deg) rotateZ(-5deg);

   }

 to {

   -webkit-transform: rotateX(50deg) rotateZ(5deg);

   }

 }

 /*--------------------*/

 .rHand{

     animation: rhand 2s infinite linear;

     -moz-animation: rhand 2s infinite linear;    /* Firefox */

     -webkit-animation: rhand 2s infinite linear;    /* Safari 和 Chrome */

     -webkit-animation-direction:alternate;

 }

 @keyframes rhand

 {

 from {

   transform: rotateX(50deg) rotateZ(5deg);

   }

 to {

   transform: rotateX(-50deg) rotateZ(-5deg);

   }

 }

 @-moz-keyframes rhand /* Firefox */

 {

 from {

   -moz-transform: rotateX(50deg) rotateZ(5deg);

   }

 to {

   -moz-transform: rotateX(-50deg) rotateZ(-5deg);

   }

 }

 @-webkit-keyframes rhand /* Safari 和 Chrome */

 {

 from {

   -webkit-transform: rotateX(50deg) rotateZ(5deg);

   }

 to {

   -webkit-transform: rotateX(-50deg) rotateZ(-5deg);

   }

 }

 /*--------------------*/

 .LFoot{

     animation: lfoot 2s infinite linear;

     -moz-animation: lfoot 2s infinite linear;    /* Firefox */

     -webkit-animation: lfoot 2s infinite linear;    /* Safari 和 Chrome */

     -webkit-animation-direction:alternate;

 }

 @keyframes lfoot

 {

 from {

   transform: rotateX(30deg) rotateZ(5deg);

   }

 to {

   transform: rotateX(-30deg) rotateZ(-5deg);

   }

 }

 @-moz-keyframes lfoot /* Firefox */

 {

 from {

   -moz-transform: rotateX(30deg) rotateZ(5deg);

   }

 to {

   -moz-transform: rotateX(-30deg) rotateZ(-5deg);

   }

 }

 @-webkit-keyframes lfoot /* Safari 和 Chrome */

 {

 from {

   -webkit-transform: rotateX(30deg) rotateZ(5deg);

   }

 to {

   -webkit-transform: rotateX(-30deg) rotateZ(-5deg);

   }

 }

 /*--------------------*/

 .rFoot{

     animation: rfoot 2s infinite linear;

     -moz-animation: rfoot 2s infinite linear;    /* Firefox */

     -webkit-animation: rfoot 2s infinite linear;    /* Safari 和 Chrome */

     -webkit-animation-direction:alternate;

 }

 @keyframes rfoot

 {

 from {

   transform: rotateX(-30deg) rotateZ(-5deg);

   }

 to {

   transform: rotateX(30deg) rotateZ(5deg);

   }

 }

 @-moz-keyframes rfoot /* Firefox */

 {

 from {

   -moz-transform: rotateX(-30deg) rotateZ(-5deg);

   }

 to {

   -moz-transform: rotateX(30deg) rotateZ(5deg);

   }

 }

 @-webkit-keyframes rfoot /* Safari 和 Chrome */

 {

 from {

   -webkit-transform: rotateX(-30deg) rotateZ(-5deg);

   }

 to {

   -webkit-transform: rotateX(30deg) rotateZ(5deg);

   }

 }

 /*--------------------*/

 .header{

     animation: header 3s infinite ease-out;

     -moz-animation: header 3s infinite ease-out;    /* Firefox */

     -webkit-animation: header 3s infinite ease-out;    /* Safari 和 Chrome */

     -webkit-animation-direction:alternate;

 }

 @keyframes header

 {

 from {

   transform: rotateX(-8deg) rotateY(-10deg);

   }

 to {

   transform: rotateX(8deg) rotateY(10deg);

   }

 }

 @-moz-keyframes header /* Firefox */

 {

 from {

   -moz-transform: rotateX(-8deg) rotateY(-10deg);

   }

 to {

   -moz-transform: rotateX(8deg) rotateY(10deg);

   }

 }

 @-webkit-keyframes header /* Safari 和 Chrome */

 {

 from {

   -webkit-transform: rotateX(-8deg) rotateY(-10deg);

   }

 to {

   -webkit-transform: rotateX(8deg) rotateY(10deg);

   }

 }

 /*--------------------*/

 .all{

     animation: all 8s infinite linear;

     -moz-animation: all 8s infinite linear;

     -webkit-animation: all 8s infinite linear;

     -webkit-animation-direction:alternate;

 }

 @keyframes all

 {

 from {

   transform: rotateY(20deg);

   }

 to {

   transform: rotateY(50deg);

   }

 }

 @-moz-keyframes all /* Firefox */

 {

 from {

   -moz-transform: rotateY(20deg);

   }

 to {

   -moz-transform: rotateY(50deg);

   }

 }

 @-webkit-keyframes all /* Safari 和 Chrome */

 {

 from {

   -webkit-transform: rotateY(20deg);

   }

 to {

   -webkit-transform: rotateY(50deg);

   }

 }

 </style>

 <body>

 <cube class="all" style=''>

     <cube class="header" style='top:-6em;left:-3.5em'>

       <back></back>

       <bottom></bottom>

       <front></front>

       <left></left>

       <right></right>

       <top></top>

     </cube>

     <cube class="body" style=''>

       <back></back>

       <bottom></bottom>

       <front></front>

       <left></left>

       <right></right>

       <top></top>

     </cube>

     <cube class="hand lHand" style='top:0.5em;left:-3.5em;'>

       <back></back>

       <bottom></bottom>

       <front></front>

       <left></left>

       <right></right>

       <top></top>

     </cube>

     <cube class="hand rHand" style='top:0.5em;left:6.5em;'>

       <back></back>

       <bottom></bottom>

       <front></front>

       <left></left>

       <right></right>

       <top></top>

     </cube>

     <cube class="foot LFoot" style='top:6.5em;left:0.25em;'>

       <back></back>

       <bottom></bottom>

       <front></front>

       <left></left>

       <right></right>

       <top></top>

     </cube>

     <cube class="foot rFoot" style='top:6.5em;left:3.25em;'>

       <back></back>

       <bottom></bottom>

       <front></front>

       <left></left>

       <right></right>

       <top></top>

     </cube>

     <cube class="dress" style='top:6em;left:0em;'>

       <back></back>

       <front></front>

       <left></left>

       <right></right>

     </cube>

 </cube>

     <script>

     </script>

 </body>

 </html>

rar：http://download.csdn.net/detail/wangxsh42/8565415

[原][CSS3]会动的盒子机器人的更多相关文章

纯代码利用CSS3 圆角边框和盒子阴影制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影制作 iphone 手机效果大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
css3常用动效以及总结
(迁移自旧博客2017 08 06) CSS3 文本效果: box-shadow:盒子阴影,可以给卡片添加提高美化效果.可广泛应用于内容展示页面. <div class="card&q ...
css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
CSS3:box-sizing:不再为盒子模型而烦恼
题外话: W3C奉行的标准,就是content-box,就是须要计算边框,填充还有内容的;可是就我个人而言, 比較喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局); 盒子模型差异 ...
CSS3中的弹性盒子模型
介绍在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...
css3 动画+动画库
css3 动画实现原理 1.transition 过渡:https://www.runoob.com/cssref/css3-pr-transition.html 语法:( transition的 ...
CSS3 Flex Box 弹性盒子、弹性布局
目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...
[CSS3] 学习笔记--CSS盒子模型
1.CSS盒子模型概述盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距内边距在content外,bord ...

随机推荐

vs xamarin android 读取rest
private void Btn_Click(object sender, EventArgs e) { var u = FindViewById<EditText>(Resource.I ...
XML序列化的时候如何支持Namespace
我曾经不止一次(当然不仅仅是我意识到这个问题)说到过,XML标准中的Namespace的设计其实是一个较为失败的设计,它有它的优点,但缺点更多. http://zzk.cnblogs.com/s?w= ...
java之初识服务器跨域获取数据
当一个项目膨大到无法进行整理时,而作为新负责维护的团队是非常苦恼的.对于想实现两个系统的数据访问,使用Ajax数据请求方式获取jsonp格式的数据需要有前端jquery库文件. 前端代码通过jque ...
（原创）详解KMP算法
KMP算法应该是每一本<数据结构>书都会讲的,算是知名度最高的算法之一了,但很可惜,我大二那年压根就没看懂过~~~ 之后也在很多地方也都经常看到讲解KMP算法的文章,看久了好像也知道是怎么 ...
基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
Theano入门神经网络(三)
附录一个:Keras学习随笔 http://blog.csdn.net/niuwei22007/article/details/49045909 参考 <Python Machine Learn ...
报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常
起因: 做项目的时候做了一个表格内容超过DIV容器自动横向滚动处理.别的浏览器都正常:但是在IE下面明明表格table和容器DIV宽度一致但是却出现了滚动条.如图然后本人做实验找了半天原因终于是找到 ...
如何使用laravel搭建后台登录系统
今天想用laravel搭建一个后台系统,就需要最简单的那种,有用户登录系统,试用了下,觉得laravel的用户登录这块做的还真happy.当然,前提就是,你要的用户管理系统是最简单的那种,就是没有用户 ...
qml基础学习模型视图(一)
一.理解qml模型和视图 qt的发展是迅速的,虽然在每一个release版本中或多或少都有bug,但是作为一个庞大的gui库,no,应该说是一个开发框架开说,qt已经算是做的相当好.qml部分是qt4 ...
获取MS SQL TABLE列名列表
在MS SQL Server中,想获取表的所有列名,可以使用下面SQL语句: SELECT [COLUMN_NAME] FROM [INFORMATION_SCHEMA].[Columns] WHER ...

[原][CSS3]会动的盒子机器人

[原][CSS3]会动的盒子机器人的更多相关文章

随机推荐

热门专题