<!DOCTYPE html>

<html>

<head>

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

	<title>css3旋转动画</title>

	<style type="text/css">

		*{margin:0;padding:0;}

		html,body{height:100%;}

		body{background: radial-gradient(circle at center,  #34679a 0%,#214163 47%,#0d1926 100%);}

		.con{width:300px;height:300px;margin:0 auto;position:relative;margin:0 auto;}

		.con .box{transform-style: preserve-3d; width:200px;height:200px;border:1px solid #fff;border-radius:50%;-webkit-transform:rotateX(-80deg) rotateY(20deg);position:absolute;left:0;top:0;}

		.con .box2{-webkit-transform:rotateX(80deg) rotateY(20deg);}

		.con .box3{-webkit-transform:rotateX(-70deg) rotateY(60deg);}

		.con .box4{-webkit-transform:rotateX(70deg) rotateY(60deg);}

		.center{-webkit-animation:centerGo 2s infinite linear;width:40px;height:40px;background:#fff;position:absolute;left:81px;top:82px;border-radius:50%;box-shadow:0 0 20px #fff;}

		@-webkit-keyframes centerGo{

			0%{

				box-shadow:0 0 0 transparent;

			}

			50%{

				box-shadow:0 0 20px #fff;

			}

			100%{

				box-shadow:0 0 0 transparent;

			}

		}

		.box .point{animation:point 2s infinite linear;width:200px;height:200px;position:relative;transform-style: preserve-3d;}

		.point:after{animation:pointAfter 2s infinite linear;content:"";width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff;position:absolute;left:24%;top:13px;z-index:999;}

		.box2 .point,.box2 .point:after{-webkit-animation-delay:-.5s;}

		.box3 .point,.box3 .point:after{-webkit-animation-delay:-1.5s;}

		.box4 .point,.box4 .point:after{-webkit-animation-delay:-2s;}

		@-webkit-keyframes point{

			from{

				transform:rotateZ(0deg);

			}to{

				transform:rotateZ(360deg);

			}

		}

		@-webkit-keyframes pointAfter{

			from {

				-webkit-transform: rotateX(90deg) rotateY(0deg);

				transform: rotateX(90deg) rotateY(0deg);

			} to {

			  -webkit-transform: rotateX(90deg) rotateY(-360deg);

				transform: rotateX(90deg) rotateY(-360deg);

			}

		}

	</style>

</head>

<body>

	<div class="con">

		<div class="center"></div>

		<div class="box box1">

			<div class="point"></div>

		</div>

		<div class="box box2">

			<div class="point"></div>

		</div>

		<div class="box box3">

			<div class="point"></div>

		</div>

		<div class="box box4">

			<div class="point"></div>

		</div>

	</div>

</body>

</html>

　　

css3旋转倾斜3d小动画的更多相关文章

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

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  2. 用css3做一个求婚小动画

    概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...

  3. css3旋转、过渡、动画属性

    1.transform 该属性对元素进行旋转.缩放.移动和倾斜 translate元素从当前位置移动 rotate元素顺时针旋转 scale元素的尺寸增大或减小 skew元素翻转 2.transiti ...

  4. 【CSS3】横屏引导小动画

    演示地址:http://codepen.io/anon/pen/oXbXdX 主要知识点: @media all and (orientation : landscape) { /* 这是匹配横屏的状 ...

  5. 利用svg描边+css3实现边框逐渐消失小动画

    首先简单的描述一下svg中两个属性: stroke-dasharray:表示每个虚线的长短. stroke-dashoffset:表示首个虚线的偏移量. 当两者都特别大的时候就会消失掉 直接上代码: ...

  6. CSS3 skew倾斜、rotate旋转动画

    css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...

  7. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  8. css3之3D魔方动画（小白版）

      在这里分享一下3D魔方动画,html5+CSS3即可完成~无图无真相,先上效果图 第一步非常简单,就是先将魔方的结构画出来.大家都玩过魔方,知道魔方是一个有六个面的正方体.这里我们先写一个大的di ...

  9. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

随机推荐

  1. 转载 Servlet3.0中使用注解配置Servle

    转载地址:http://www.108js.com/article/article10/a0021.html?id=1496 开发Servlet3的程序需要一定的环境支持.Servlet3是Java ...

  2. MyBatis操作指南-搭建项目基础环境（基于Java API）含log4j2配置

  3. 献给初学者：谈谈如何学习Linux操作系统

    本文出自 “技术成就梦想” 博客,请务必保留此出处http://ixdba.blog.51cto.com/2895551/569329. 为了能把这篇不错的文章分享给大家.所以请允许我暂时用原创的形式 ...

  4. Windows消息机制概述

    消息是指什么?     消息系统对于一个win32程序来说十分重要,它是一个程序运行的动力源泉.一个消息,是系统定义的一个32位的值,他唯一的定义了一个事件,向 Windows发出一个通知,告诉应用程 ...

  5. 如何使用Android Studio开发/调试Android源码

    本文是以源码中development/tools/idegen/README作为指导文档. 环境: Ubuntu 14.10,openJdk 1.7,Android Studio 1.0.2,andr ...

  6. XML 与 DataSet/DataTable 互相转换实例（C#）——转载

    // <summary>      /// XML形式的字符串.XML文江转换成DataSet.DataTable格式      /// </summary>      pub ...

  7. 自定义view imageviw

    新建一个类继承imageview package com.exaple.myselfview; import android.content.Context; import android.graph ...

  8. PHPCMS V9 框架代码分析（入口程序）

    PHPCMS是采用MVC设计模式开发,基于模块和操作的方式进行访问,采用单一入口模式进行项目部署和访问,无论访问任何一个模块或者功能,只有一个统一的入口. 入口程序是在前期处理用户请求的引导程序.它是 ...

  9. SVN服务端启动解决方案（2013-12-10 记）

     解决每一次开机都得用DOS启动SVN服务,而DOS窗口又无法关闭的情况 1.安装Setup-Subversion-1.8.5.msi搭建好SVN服务端(下载地址:http://subversion. ...

  10. [课程设计]Scrum 2.5 多鱼点餐系统开发进度(下单一览页面-菜式添加框架设计)

    Scrum 2.5 多鱼点餐系统开发进度  (下单一览页面-菜式添加框架设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题 ...