css3 3d旋转风车效果_wly2237152897的博客-程序员宅基地

技术标签: css  html  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>旋转风车</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #607d8b;
      }
      .box {
        position: absolute;
        left: 50%;
        top: calc(50% - 150px);
        left: calc(50% -100px);
        width: 200px;
        height: 300px;
        transform: perspective(1000px) rotateY(45deg);
        /* background: #fff; */
        transform-style: preserve-3d;
      }
      .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        animation: myanimate 2.5s linear infinite;
        /* 在3d空间中显示 默认不写是flat */
        transform-style: preserve-3d;
      }
      .box div span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        text-align: center;
        background: linear-gradient(0deg, #f1f1f1, #bbb, #f1f1f1);
        transform-style: preserve-3d;
        border-radius: 20px;
      }
      .box div span:nth-child(1) {
        transform: rotateX(0deg);
      }
      .box div span:nth-child(2) {
        transform: rotateX(45deg);
      }
      .box div span:nth-child(3) {
        transform: rotateX(90deg);
      }
      .box div span:nth-child(4) {
        transform: rotateX(-45deg);
      }
      @keyframes myanimate {
        0% {
          transform: perspective(1000px) rotateX(0deg);
        }
        100% {
          transform: perspective(1000px) rotateX(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
      </div>
    </div>
  </body>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u012350560/article/details/119804034

智能推荐

上交大 2011 二次方程计算器_dixiang1123的博客-程序员宅基地

题目:输入关于x的二次方程表达式(系数为整数),输出两个解(由小到大输出,保留两位小数);如果无解,则输出“No Solution”。思路:先确定等号位置,分成左右两个字符串,从中分别提取系数,再综合。然后求解。提取系数的过程如图:过程:介绍两个函数:atoi()函数可以识别"+""-"号,并正确转化成int。string str="-2980";string s...

只重写equals()但不重写hashCode会有什么后果?_1024276449的博客-程序员宅基地_不重写hashcode有什么影响

只重写equals()但不重写hashCode会有什么后果?1.如果判断两个数如果hashCode相同则equals不一定相同,反而equals相同则hashCode则一定相同。2.那么我们只重写equals()但不重写hashCode会有什么后果?如果我们不将我们重写equals方法的类放到HashSet等散列表中时则不会有什么影响,但如果放到我们的散列表中时我们的散列表则会优先比较HashCode所以可能会产生错误。...

Struts2中的设计模式_7潜伏7的博客-程序员宅基地_struts2设计模式

设计模式(Design pattern)是经过程序员反复实践后形成的一套代码设计经验的总结。设计模式随着编程语言的发展,也由最初的“编程惯例”逐步发展成为被反复使用、并为绝大多数程序员所知晓的、完善的理论体系。我们使用设计模式(Design pattern)的初衷,是使代码的重用度提高、让代码能够更容易被别人理解以及保证代码的可靠性。毫无疑问,在程序中使用设计模式无论是对于程序员自身还是对于应用程

Assemble UVALive - 3971 组装电脑_Nicolas Lee的博客-程序员宅基地

Recently your team noticed that the computer you use to practice for programming contests is notgood enough anymore. Therefore, you decide to buy a new computer. To make the ideal computer ...

ubuntu 16.06 编译 vlc for android_qq_15361657的博客-程序员宅基地

1、https://www.ubuntu.com/download      下载 ubuntu16.042、vmware workstation配置虚拟机3、下载android studio,下载sdk ndk4、配置sdk,ndk5、配置bash.profile6、git7、sh compile.sh

如何发布ArcGIS Server离线地图(google 瓦片)_weixin_44922969的博客-程序员宅基地

说明本案例实现内容:GoogleEarth瓦片地图的获取、在ArcGIS Server Manger中发布下载好的影像瓦片数据。工具准备1、BIGEMAP地图下载器http://www.bigemap.com/reader/download/2、ARCGIS10.2 http://pan.baidu.com/s/1i5uMzU93、ARCGIS SERVE...

随便推点

Spring Cloud 核心组件 Dubbo-Nacos_m0_37567301的博客-程序员宅基地

Spring Cloud 核心组件 Dubbo-Nacos作者:DecaMinCow博客:http://blog.csdn.net/m0_37567301邮箱:decamincow#gmail.com (#-&gt;@)Dubbo 介绍阿里研发的 RPC 框架注册中心为 nacos 的 dubbo 示例1. Provider依赖文件&lt;dependency&gt; &lt;groupId&gt;com.alibaba.cloud&lt;/groupId&gt; &l

android接收list对象数组,Android - ToDoList(定制ArrayAdapter)_席佳益的博客-程序员宅基地

ToDoList(定制ArrayAdapter)本文地址:http://blog.csdn.net/caroline_wendy/article/details/21401907前置项目参见:http://blog.csdn.net/caroline_wendy/article/details/21330733环境: Android Studio 0.5.1ArrayAdapter使用泛型(模...

STS on Eclipse 3.6_咔啡的博客-程序员宅基地

EngineeringChristian DupuisJuly 01, 2010Last week the Eclipse Foundation released the much anticipated next version of Eclipse. You can download Eclipse 3.6 aka Helios from SpringSource’s member distribution page. Also check out the New &amp; Noteworthy

js读取服务器html文件,【未解决】js中将html内容保存到服务器上的本地的html文件..._Arsd的博客-程序员宅基地

【背景】之前已经实现了:网页中,点击某个按钮,可以调用到js获得到KindEditor的html的内容:function submitGoodsContent(){var kindeditor = window.editor;// 取得HTML内容html = kindeditor.html();console.log(html);}商品名:在此输入新产品的介绍内容提交当前页面现在希望实现,不仅仅...

2020-12-02_weixin_50738680的博客-程序员宅基地

产品名称: GSK 928TEⅡ车床数控系统型  号: GSK 928TEⅡ价  格: 请与商家联系品  牌: 广州数控产品介绍: GSK 928TEⅡ车床数控系统是广州数控设备有限公司在GSK 928TE车床数控系统的基础上推出的一款新的成熟产品。本系统功能更加强大,性能更加稳定,与本公司生产的交流伺服驱动单元、交流伺服电动机等匹配,构成了一款性能高的普及型数控系统。本系统也可按客户要求配置其他驱动装置。● CPLD硬件插补,μm级精度,最高速度15m/min● 加减速特性、辅助功能逻辑可由用户设

荷畔微风 - 在函数计算FunctionCompute中使用WebAssembly_chikuai9995的博客-程序员宅基地

WebAssembly 是一种新的W3C规范,无需插件可以在所有现代浏览器中实现近乎原生代码的性能。同时由于 WebAssembly 运行在轻量级的沙箱虚拟机上,在安全、可移植性上比原生进程更加具备优势。同时资源消耗小、启动速度快的特点也非常适合Serverless的场景。开发者们开始探索...