[原][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 ...
随机推荐
- JAVA设计模式《一》
设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于 ...
- 编写可编辑的List控件
今天由于项目的需要,要编写个能编辑的List控件,即双击List控件的表项能修改其中的内容.由于MFC自带的List控件是不能编辑的,所以在网上找了下怎样编写可编辑的CListCtrl控件,基本上都是 ...
- Winform(C#.NET)自动更新组件的使用及部分功能实现
声明:核心功能的实现是由园子里圣殿骑士大哥写的,本人是基于他核心代码,按照自己需求进行修改的. 而AutoUpdaterService.xml文件生成工具是基于评论#215楼 ptangbao的代 ...
- 编译Linux内核
下面的实验以 debian7.5 64bit 为例. 获取源码 获取 debian7.5 本身的源码非常简单: sudo apt-get install linux-source https://ww ...
- 分享使用Entity Framework的一个坑:Include无效
如果不想延迟加载,可以通过设置:context.Configuration.LazyLoadingEnabled = false;或查询时加上AsNoTracking()方法即可. 如果不想生成代理, ...
- JS魔法堂: Native Promise Only源码剖析
一, 前言 深入学习Promise的朋友应该都看过<深入理解Promise五部曲>这一系列的文章, 以解除回调地狱之外的观点来剖析Promise更多的内涵,确实十分精彩. Part 1: ...
- win10系统下点击关机却自动重启的问题解决思路
第一步.进入win10系统后,我们点击开始菜单上鼠标右键,选择控制面板 第二步.找到电源选项,点击进去(如何没发现,点击右上角查看方式,更换为小图标) 第三步.点击选择关闭盖子的功能 第四 ...
- 【原创】kafka producer源代码分析
Kafka 0.8.2引入了一个用Java写的producer.下一个版本还会引入一个对等的Java版本的consumer.新的API旨在取代老的使用Scala编写的客户端API,但为了兼容性 ...
- MVC的路径查找顺序
使用MVC的朋友们,知道MVC的funny之处. 但是如果出现路径找不到,请记住以下的页面路径寻找顺序. http://www.cnblogs.com/sosoft/ 首先,知道你的Controlle ...
- 算法實例-C#-歸併排序-MergeSort
# 算法实例 # 排序算法Sort 歸併排序MergeSort 算法說明 歸併的思路是任意兩個元素可以比較大小,那麼任意兩個有序的元素集合也可以通過比較大小的方式歸併成一個有序的元素集合 任何的無序元 ...