<!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. python绘制五角星

    问题描述: python中运用turtle图形模块绘制五角星 问题分析: turtle绘制图形时,得知图形中重要点的坐标非常重要. 于是,绘制五角星问题转化成为一个数学问题,计算五个顶点坐标即可. 已 ...

  2. gradle阿里云镜像配置

    Maven镜像的配置参考: http://blog.java1234.com/blog/articles/252.html buildscript { repositories { mavenLoca ...

  3. 简述Vue中的计算属性

    1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...

  4. 微信小程序---》分包加载

    [小程序]---分包加载   一.分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载 在构建小程序分包项目时,构建会输出一个或多个分包.每个使 ...

  5. Java中的容器（集合）之ArrayList源码解析

    1.ArrayList源码解析 源码解析: 如下源码来自JDK8(如需查看ArrayList扩容源码解析请跳转至<Java中的容器(集合)>第十条):. package java.util ...

  6. C/C++二维数组名和二级指针

    转载 :https://blog.csdn.net/wu_nan_nan/article/details/51741030  作者:吴一奇 1. 指针1.1 一个指针包含两方面:a) 地址值:b) 所 ...

  7. Excel VBA获取当文件下级子目录或目录中文件

    '====================================================================== '功能: 查找指定文件夹含子文件夹内所有文件名或文件夹名 ...

  8. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  9. Linux压缩、解压

    gzip压缩: 归档,压缩,yourFloder文件夹生成yourName.tar.gz: - tar -zcvf yourName.tar.gz yourFloder 解压yourName.tar. ...

  10. java 中的引用类型

    GC基本原理 GC (Garbage Collection)的基本原理:将内存中不再被使用的对象进行回收,GC中用于回收的方法称为收集器,由于GC需要消耗一些资源和时间,Java在对对象的生命周期特征 ...