<!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. Win10不能远程其他远程计算机的解决办法

    Win10不能远程其他远程计算机的解决办法   转自: https://blog.csdn.net/qq_38197830/article/details/69488236 首先打开控制面板——> ...

  2. mysql 小数位

    1    select convert(t/100,decimal(15,2)) as a from user (1) convert() 一.在mysql操作中我们经常需要对数据进行类型转换.此时我 ...

  3. ajax与json总结

    1.jquery中调用ajax方法 $.ajax({ async:true, type:"post", url:"xxxServlet", data:{&quo ...

  4. 【摘】sizeof实现

    注意sizeof是运算符,而非函数 关于sizeof的两个精巧的宏实现. 非数组的sizeof: #defne _sizeof(T) ( (size_t)((T*)0 + 1)) 数组的sizeof: ...

  5. Linux安装软件-CentOS和Ubuntu介绍

    开发十年,就只剩下这套架构体系了! >>>   不同Linux发行版的软件安装会有不同的方式,其中CentOS安装软件的主要方式是rpm和yum,Ubuntu可以使用apt-get, ...

  6. Django 的 logging日志文件配置

    在Django的settings配置文件里配置以下信息: import os BASE_LOG_DIR = os.path.join(BASE_DIR , "log") # log ...

  7. Vue Cli3 TypeScript 搭建工程

    Vue Cli3出来也一段时间了,我想尝试下Vue结合TypeScript搭建个工程,感受下Vue下用TS...网上有一篇讲的非常详细的教程  vue-cli3.0 搭建项目模版教程(ts+vuex+ ...

  8. vim ctags

    ctags -I __THROW -I __attribute_pure__ -I __nonnull -I __attribute__ --file-scope=yes --langmap=c:+. ...

  9. [转]Oracle 11g 基于CentOS7静默安装教程(无图形界面，远程安装) --有部份地方有问题

    Oracle 11g 基于CentOS7静默安装教程(无图形界面,远程安装) [转载]原文地址:http://canonind.blog.51cto.com/8239025/1883066 一.安装前 ...

  10. 88-基于FMC接口的2路CameraLink Base输入子卡模块

    基于FMC接口的2路CameraLink Base输入子卡模块 1.板卡概述 FMC连接器是一种高速多pin的互连器件,广泛应用于板卡对接的设备中,特别是在xilinx公司的所有开发板中都使用.该Ca ...