3D-球动画

3D动画--球


源码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="utf-8">

<title>CSS3 制作3D旋转球体</title>

<meta name="keywords" content="CSS3,CSS3旋转,CSS3动画,CSS3D,transform,3D,keyframes,蓝色梦想,梦幻神化">

<meta name="description" content="CSS3 制作3D旋转球体">

<style>

* {

margin:0; padding:0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

/*

语法结构&说明:

box-sizing:content-box | border-box

content-box:此属性表现为标准模式下的盒模型(当我们设置元素的width和height时,它的宽度不包括border和padding。例:width:100px; border-width:10px; 元素实际宽度为220px;)

border-box:此属性表现为怪异模式下的盒模型(和content-box相反,它的宽度包含border和padding。例:width:100px; border-width:10px; 此时的border相当于内边距,元素实际宽度仍为200px;)

*/

}

body {

background:#333;

}

.wrap {

margin: 150px auto;

position: relative;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

}

.wrap, .x, .y, .z {

width: 500px;

height: 500px;

border-radius: 50%;

}

.x1, .x2, .y, .y1, .y2, .z, .z1, .z2 , .xInner , .yInner , .zInner {

position: absolute;

}

.x1,.x2,.y1,.y2,.z1,.z2 {

width: 87.5%;

height: 87.5%;

border-radius: 50%;

}

.x {

position: relative;

border: 1px solid #FF0099;

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

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

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

transform-style: preserve-3d;

-webkit-animation: mymove 10s linear infinite;

-moz-animation: mymove 10s linear infinite;

-ms-animation: mymove 10s linear infinite;

animation: mymove 10s linear infinite;

}

.y {

top: 0; left: 0;

border: 2px solid #0099FF;

-webkit-transform: rotateX(90deg);

-moz-transform: rotateX(90deg);

-ms-transform: rotateX(90deg);

transform: rotateX(90deg);

}

.z {

top: 0; left: 0;

border: 1px solid #FFCC33;

-webkit-transform: rotateY(90deg);

-moz-transform: rotateY(90deg);

-ms-transform: rotateY(90deg);

transform: rotateY(90deg);

}

.x1 {

top: 6.25%; left: 6.25%;

border: 1px solid #FF0099;

-webkit-transform: translateZ(50px);

-moz-transform: translateZ(50px);

-ms-transform: translateZ(50px);

transform: translateZ(50px);

}

.x2 {

top: 6.25%; left: 6.25%;

border: 1px solid #FF0099;

-webkit-transform: rotateX(180deg) translateZ(50px);

-moz-transform: rotateX(180deg) translateZ(50px);

-ms-transform: rotateX(180deg) translateZ(50px);

transform: rotateX(180deg) translateZ(50px);

}

.y1 {

top: 6.25%; left: 6.25%;

border: 1px solid #0099FF;

-webkit-transform: rotateX(90deg) translateZ(50px);

-moz-transform: rotateX(90deg) translateZ(50px);

-ms-transform: rotateX(90deg) translateZ(50px);

transform: rotateX(90deg) translateZ(50px);

}

.y2 {

top: 6.25%; left: 6.25%;

border: 1px solid #0099FF;

-webkit-transform: rotateX(270deg) translateZ(50px);

-moz-transform: rotateX(270deg) translateZ(50px);

-ms-transform: rotateX(270deg) translateZ(50px);

transform: rotateX(270deg) translateZ(50px);

}

.z1 {

top: 6.25%; left: 6.25%;

border: 1px solid #FFCC33;

-webkit-transform: rotateY(90deg) translateZ(50px);

-moz-transform: rotateY(90deg) translateZ(50px);

-ms-transform: rotateY(90deg) translateZ(50px);

transform: rotateY(90deg) translateZ(50px);

}

.z2 {

top: 6.25%; left: 6.25%;

border: 1px solid #FFCC33;

-webkit-transform: rotateY(270deg) translateZ(50px);

-moz-transform: rotateY(270deg) translateZ(50px);

-ms-transform: rotateY(270deg) translateZ(50px);

transform: rotateY(270deg) translateZ(50px);

}

.xInner {

border: 1px solid #FF0099;

width: 100%;

top: 50%;

}

.yInner {

height: 100%;

left: 50%;

border: 1px solid #0099FF;

-webkit-transform: rotateX(90deg);

-moz-transform: rotateX(90deg);

-ms-transform: rotateX(90deg);

transform: rotateX(90deg);

}

.zInner {

height: 100%;

left: 50%;

border: 1px solid #FFCC33;

-webkit-transform: rotateY(90deg);

-moz-transform: rotateY(90deg);

-ms-transform: rotateY(90deg);

transform: rotateY(90deg);

}

@-webkit-keyframes mymove

{

100% { -webkit-transform:  rotateX(360deg) rotateY(180deg) }

}

@-moz-keyframes mymove

{

100% { -moz-transform:  rotateX(360deg) rotateY(360deg) }

}

@-ms-keyframes mymove

{

100% { -ms-transform:  rotateX(360deg) rotateY(360deg) }

}

@keyframes mymove

{

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

}

#info{ text-align:center; font-family:"Microsoft YaHei"; line-height:24px; color:#555; border-top:1px #222 solid; padding:25px 0;}

#info .title{ font-size:20px;}

#info .author{ font-size:14px;}

#info a{ text-decoration:none; color:#555;}

</style>

</head>

<body>

<div class="wrap">

<div class="inner"></div>

<div class="x">

<div class="x1"></div>

<div class="x2"></div>

<div class="xInner"></div>

<div class="y"></div>

<div class="y1"></div>

<div class="y2"></div>

<div class="yInner"></div>

<div class="z"></div>

<div class="z1"></div>

<div class="z2"></div>

<div class="zInner"></div>

</div>

</div>

<!--<div id="info">

<p class="title">CSS3 制作3D旋转球体</p>

<p class="author">By www.bluesdream.com <script src="./CSS3-3D旋转球体_files/stat.php" language="JavaScript"></script><script src="./CSS3-3D旋转球体_files/core.php" charset="utf-8" type="text/javascript"></script><a href="http://www.cnzz.com/stat/website.php?web_id=1734797" target="_blank" title="站长统计">站长统计</a></p>

</div>-->

</body>

</html>



时间: 2024-10-10 18:32:01

3D-球动画的相关文章

透过HT for Web 3D看动画Easing函数本质

http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html 50年前的这个月诞生了BASIC这门计算机语言,回想起自己喜欢上图形界面这行,还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码,当带色彩的奥运五环呈现在自己面前时我已知道自己这辈子要走的路了.在这个忘本逐新的年代不见多少媒体提及这影响了几代人的BASIC语言的50年庆了. 如今消费者对用户体验的高要求,以远不能以静

3D语音天气球(源码分享)——创建可旋转的3D球

开篇废话: 在9月份时参加了一个网站的比赛,比赛的题目是需要使用第三方平台提供的服务做出创意的作品. 于是我选择使用语音服务,天气服务,Unity3D,Android来制作一个3D语音天气预报,我给它起名叫做3D语音天气球(好土...) 虽然没获奖但我觉得这个项目中还是有些东西比较有创意的,所以打算分享出来,或许有人会用到. 下面简单看下效果图: 左边是Unity做出后在电脑上运行效果图 右边是Unity结合Android和语音控制之后在手机运行的效果图(手机不会做GIF):      瞅着还不

情感的艺术3D角色动画

3D人物造型 When drawn animation frame by frame, the images have a tendency to change, at least a little, but it increased by at least movement, even his calm lens. When the basic 3D game character animation scene in Melbourne project was first establishe

3D语音天气球(源码分享)——通过天气服务动态创建3D球

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3D语音天气球(源码分享)--创建可旋转的3D球 二:通过天气服务,从网络获取时实天气信息并动态生成"3D球" 三:Android语音服务和Unity的消息传递 四:Unity3D端和Android端的结合 关于项目的详细介绍和3D球的创建请看上面第一篇文章(重要) 今天主要讲解如何通过获取

透过WebGL 3D看动画Easing函数本质

50年前的这个月诞生了BASIC这门计算机语言,回想起自己喜欢上图形界面这行,还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码,当带色彩的奥运五环呈现在自己面前时我已知道自己这辈子要走的路了.在这个忘本逐新的年代不见多少媒体提及这影响了几代人的BASIC语言的50年庆了. 如今消费者对用户体验的高要求,以远不能以静态平面图形打动人心,动画已是衡量前端产品用户体验不可忽视的重要因素,最近Facebook开源的Pop动画框架已发了iOS业界极大的关注,其实Apple早在

基于HTML5/CSS3可折叠的3D立方体动画

今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码. html代码: <div class="content bgcolor-1"> <h2 class="center"> Depth Cube</h2> <div style="height: 300px; marg

Android 3D旋转动画之Camera 和 Matrix

前面两篇博文讲解的都是Android 的2D动画效果,要想做出非常炫酷的3D动画效果怎么办?android 并没有提供3D动画接口给用户,所以我们得自己重写这样一个3D接口动画. 接口如下: /* * @Title: My3dAnimation.java * @Description: TODO<请描述此文件是做什么的> * @author: xjp * @data: 2014年9月15日 上午8:54:10 * @version: V1.0 */ package com.xjp.animat

HTML5 3D爱心动画及其制作过程

之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这个3D爱心动画的实现过程,可以一起来看看. 当然你也可以先看一下DEMO演示 这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码. HTML代码: <div class=’heart3d’> <div class=’rib1′&

从Sprite3D理解3D骨骼动画原理

为了能够更好的使用cocos为我们提供的Sprite3D,我和大家分享一下Sprite3D中关于骨骼动画原理的部分,本文使用cocos2d-x 3.2版本,这是cocos首次出现3D骨骼动画的版本,相对与本文写出来时候最新的3.5版本,由于没有其他比如灯光等功能,3D骨骼动画模块读起来要更加的清晰.如果文章有纰漏或者错误的地方,也请大家指教. 目前引擎支持3种动画格式,分别是.obj,.c3b,.c3t,由于.obj没有骨骼,.c3b是二进制,而.c3t是json格式,所以本文就用官方test中

Android自定义动画类——实现3D旋转动画

Android中的补间动画分为下面几种: (1)AlphaAnimation :透明度改变的动画. (2)ScaleAnimation:大小缩放的动画. (3)TranslateAnimation:位移变化的动画. (4)RotateAnimation:旋转动画. 然而在实际项目中透明度.缩放.位移.旋转这几种动画并不能满足我们的需求,比如我们需要一个类似下面的3D旋转动画. 这时候就需要用到自定义动画,自定义动画需要继承Animation,并重写applyTransformation(floa