<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <style>

      body {

        perspective: 1000px; /*给父级添加透视，因为section 需要旋转，所以给body加透视 */

      }

      @keyframes move {

        0% {

          transform: rotateY(0deg);

        }

        100% {

          transform: rotateY(360deg);

        }

      }

      section {

        position: relative;

        width: 300px;

        height: 200px;

        margin: 100px auto;

        transform-style: preserve-3d; /*给子元素添加动画效果*/

        animation: move 6s linear infinite;

      }

      section:hover {

        cursor: pointer;

        animation-play-state: paused; /*暂停动画*/

      }

      section div {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

      }

      div:nth-child(1) {

        background: coral;

        transform: translateZ(300px);

      }

      div:nth-child(2) {

        background: cadetblue;

        transform: rotateY(60deg) translateZ(300px);

      }

      div:nth-child(3) {

        background: pink;

        transform: rotateY(120deg) translateZ(300px);

      }

      div:nth-child(4) {

        background: peru;

        transform: rotateY(180deg) translateZ(300px);

      }

      div:nth-child(5) {

        background: plum;

        transform: rotateY(240deg) translateZ(300px);

      }

      div:nth-child(6) {

        background: palegreen;

        transform: rotateY(300deg) translateZ(300px);

      }

    </style>

  </head>

  <body>

    <section>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

    </section>

  </body>

</html>

案例-3D旋转木马的更多相关文章

  1. web CSS3 实现3D旋转木马

    3D 旋转木马是CSS中常见的特效之一,旋转木马可以有多种方法实现,这里我使用纯CSS实现这种动画的效果. 简要介绍一下重点 transform: rotateY(60deg) translateZ( ...

  2. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  3. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  4. CSS3 实现3D旋转木马效果

    基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...

  5. jQuery仿3D旋转木马效果插件(带索引按钮)

    项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...

  6. 案例:3D切割轮播图

    一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...

  7. 手机端3d旋转木马效果+保存图片到本地

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="U ...

  8. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  9. 3D旋转特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. dataframe字段过长被截断

    总之能,情况就是这样. 看看df类型: 64位明显不够用啊. 网上找到了segmentfault有这个问题,上面说试试 pd.set_option('display.width', 200) ,再百度 ...

  2. PC-lint初体验

    当时用lint安装到VS2008上,找到两篇比较好的帖子: https://www.cnblogs.com/sanghg/p/4550829.html                     //这个 ...

  3. Magolor的数据结构作业

    \(CodeForces 706E ~Working routine\) 给出一个矩阵,每次操作交换两个子矩阵,求最后状态. 使用链表存储,每次交换后,影响到的之后矩阵边缘的指针,暴力修改. \(~~ ...

  4. PHP上传文件和下载

    PHP 中文件上传的基础知识: 1)客户端 form 表单设置 必须设置的 form 表单项: <!DOCTYPE html> <html> <head> < ...

  5. SVN更新提示内容被锁定

    SVN更新提示内容被锁定   SVN要管理好,并且及时将最新的更新内容上传到SVN上. 在我使用从SVN上更新内容到本地时,总是提示“**********已经锁定”.如果出现这种情况,选择SVN选项“ ...

  6. CSP2019赛前小复习：

    虽然觉得复习也没有什么用,还不吃好睡好,保持好心情. SA: 坑就那几个. \(s[0]=s[n+1]=-1\). 和\(rank\)交换的\(tp\)数组的\(tp[n+1]=0\). 一般加上这两 ...

  7. CF 1150 D Three Religions——序列自动机优化DP

    题目:http://codeforces.com/contest/1150/problem/D 老是想着枚举当前在给定字符串的哪个位置,以此来转移. 所以想对三个串分别建 trie 树,然后求出三个t ...

  8. LOJ 2720 「NOI2018」你的名字——后缀自动机

    题目:https://loj.ac/problem/2720 自己总是分不清 “SAM上一个点的 len[ ] ” 和 “一个串的前缀在 SAM 上匹配的 len ”. 于是原本想的 68 分做法是, ...

  9. 继续我们的学习。这次鸟哥讲的是LVM。。。磁盘管理 最后链接文章没有看

    LVM...让我理解就是一个将好多分区磁盘帮到一起的玩意,类似于烙大饼...然后再切 新建了一个虚拟机,然后又挂了一个5G的硬盘,然后分出了5块空间,挂载到了虚拟机上.这些步骤很简单 fdisk    ...

  10. SQL执行计划详解explain

    1.使用explain语句去查看分析结果 如explain select * from test1 where id=1;会出现:id selecttype table type possible_k ...