<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background:#000;
        }
        .box{
            width:300px;
            height:300px;
            margin:200px auto;
            -webkit-perspective:1500px;
            position:relative;
        }
        .div{
            width:150px;
            height:250px;
            position:absolute;
            transform-style:preserve-3d;
            animation:name 2s linear infinite;
            transform:rotateY(0deg);
        }
        @-webkit-keyframes name {
            from{
                transform:rotateY(0deg);
            }
            to{
                transform:rotateY(360deg);
            }
        }
        .div>div{
            width:140px;
            height:240px;
            position:absolute;
            border-width:10px 10px 0 0;
            border-radius:50% 50% 0% 50%;
            border-color:red;
            border-style:solid;
        }
        .div>div:nth-of-type(1){
            transform:rotateY(0deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(2){
            transform:rotateY(450deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(3){
            transform:rotateY(90deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(4){
            transform:rotateY(135deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(5){
            transform:rotateY(180deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(6){
            transform:rotateY(225deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(7){
            transform:rotateY(270deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(8){
            transform:rotateY(315deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(9){
            transform:rotateY(360deg) rotateZ(45deg) translateX(50px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="div">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</body>
</html>

心形陀螺案例css3的更多相关文章

  1. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  2. css3心形 perspective transform

    CSS3挺有趣的,能实现不少动画,以下为娱乐内容 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  3. css3实现三角形，聊天背景气泡，心形等形状

    1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...

  4. [deviceone开发]-心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...

  5. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  6. [deviceone开发]-直播APP心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值. 二. ...

  7. CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

  8. 打印心形---print 的基础使用

    #!/bin/usr/env python#coding=utf-8'''用学习到的print语句,完成如下图形的打印工作打印心形'''print " *** *** "print ...

  9. 对图片进行各种样式裁对图片进行各种样式裁剪：圆形、星形、心形、花瓣形等剪：圆形、星形、心形、花瓣形等--第三方开源--CustomShapeImageView

    CustomShapeImageView在github上的项目主页是:https://github.com/MostafaGazar/CustomShapeImageView 如果仅仅是需要获取圆形. ...

随机推荐

  1. myeclipse的修改背景颜色和字体

  2. 整理那些用于基本生存的shell命令

    变量定义相关的 export export可以将临时定义的变量定义成环境变量 比如在一个shell中临时定义的一个变量就没法在新打开的那个shell中继续再使用 使用export之后 这个变量就变成了 ...

  3. ElasticSearch 基础 1

    ElasticSearch 基础=============================== 索引创建 ========================== 1. RESTFUL APIAPI 基本 ...

  4. Node.js实战12：fs模块高级技巧。

    通过fs模块使用流 fs模块同样有流接口,如下例: var fs = require("fs"); var read_able = fs.createReadStream(&quo ...

  5. 前端 CSS层叠性 CSS选择器优先级

    层叠性 层叠性:权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了 权重:谁的权重大,浏览器就会显示谁的属性 我们现在已经学过了很多的选择器,也就是说在一个HTML页面中有很多种方式找到一个元素并 ...

  6. python基础-6.1 match search findall group(s) 区别

    import re # match findall经常用 # re.match() #从开头匹配,没有匹配到对象就返回NONE # re.search() #浏览全部字符,匹配第一个符合规则的字符串 ...

  7. 多线程12-ManualResetEventSlim

        ));             ));             ));             t1.Start();             t2.Start();              ...

  8. tomcat 端口8080占用问题

    启动tomcat时,有时会出现8080端口占用的问题. 解决方法: 终端:ps -e | grep tomcat 会看到下边的结果 途中标记的是进程号,kill掉即可. kill -9 9734(97 ...

  9. 《剑指offer》面试题19 二叉树的镜像 Java版

    书中方法:这道题目可能拿到手没有思路,我们可以在纸上画出简单的二叉树来找到规律.最后我们发现,镜像的实质是对于二叉树的所有节点,交换其左右子节点.搞清楚获得镜像的方法,这道题实际上就变成了一道二叉树遍 ...

  10. POJ-1502 MPI Maelstrom 迪杰斯特拉+题解

    POJ-1502 MPI Maelstrom 迪杰斯特拉+题解 题意 题意:信息传输,总共有n个传输机,先要从1号传输机向其余n-1个传输机传输数据,传输需要时间,给出一个严格的下三角(其实就是对角线 ...