纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况，效果如下：

主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一点平面几何知识（计算间距、角度啥的），详细过程如下：

首先设计一下要显示的布局（俯视图），途中垂直的线为辅助线，计算偏移量时需要用的：

红色框框为旋转面（即走马灯效果的结构最终以该面的中点为旋转轴旋转的），六个面也都是基于这个面做的布局，先看红框下面的三个面，左侧的面原本在蓝色线处，通过旋转到达绿色线处，右边同理，中间的面只需要在Z轴方向移动二分之根号三个边长的距离即可，所有的面均通过偏移和旋转的方式达到上图的结构，需要注意的是要保证有图案的面（本例中使用的是文字，思路一致）要向外，比如上面中间的面，在Z轴向外偏移二分之根号三个边长的距离之后还要以中点为圆心旋转180°，所有的面同理易得。在此过程中需要牢记的一点技术是：三维坐标系中，从坐标原点出发，向着坐标轴的正方向看去，逆时针旋转时rotate(X/Y/Z)的值为正数，顺时针旋转时，rotate(X/Y/Z)值为负数。

设置结构：一个3D场景、一个走马灯的旋转面和走马灯的六个面：

<div class="wapper">        <!--场景-->

    <div class="rotate">   <!--容器-->

        <div class="item itemOne">1</div>  <!--六个面-->

        <div class="item itemTwo">2</div>

        <div class="item itemThree">3</div>

        <div class="item itemFour">4</div>

        <div class="item itemFive">5</div>

        <div class="item itemSix">6</div>

    </div>

</div>

设置3D场景：

.wapper{

    -webkit-perspective:;    /*观察距离800*/

    -webkit-perspective-origin:50% -100%;    /*从正前方上方斜向下观察*/

    width:400px;

    height:300px;

    margin:100px auto;

}

设置旋转面：

@-webkit-keyframes rotation{      /*动画过程*/

    0%{-webkit-transform:rotateY(0deg);}

    100%{-webkit-transform:rotateY(-360deg);}

}

.rotate{

    -webkit-transform-style:preserve-3d;     /*3D变换*/

    -webkit-animation: rotation 6s infinite;  /*动画名称、时间、循环动画*/

    -webkit-animation-timing-function: linear;  /*匀速动画*/

    -webkit-transform-origin:center;      /*沿中间旋转*/

    width:100%;

    height:100%;

    position:relative;   /*相对定位布局*/

}

对六个面除了位置之外的通用样式做设置：

.item{

    -webkit-transform-origin:center;  /*均沿中心旋转*/

    width:198px;

    height:300px;

    position:absolute;   /*绝对定位在旋转面上*/

    background:none;

    text-align:center;

    line-height:300px;

}

分别设置六个面的位置，以一号为例（上面结构图中红框下面左边绿色线标注的面），所有的数值均需要经过几何计算得来：

.itemOne{

    left:-50px;

    -webkit-transform:translateZ(87px) rotateY(-60deg);  /*z轴向外移动87px，沿Y轴方向旋转-60°*/

    background:#f00;

}

在鼠标悬浮在该结构上时动画停止：

.rotate:hover{

    -webkit-animation-play-state:paused;  /*设置动画状态*/

}

本例子只有在webkit内核的浏览器中可以查看效果，如需兼容其他现代浏览器，需添加 -moz- 等前缀，完整代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Animation Test</title>

    <style>

    *{margin:0;padding:0;}

    @-webkit-keyframes rotation{

        0%{-webkit-transform:rotateY(0deg);}

        100%{-webkit-transform:rotateY(-360deg);}

    }

    .wapper{

        -webkit-perspective:800;

        -webkit-perspective-origin:50% -100%;

        width:400px;

        height:300px;

        margin:100px auto;

    }

    .rotate{

        -webkit-transform-style:preserve-3d;

        -webkit-animation: rotation 6s infinite;

        -webkit-animation-timing-function: linear;

        -webkit-transform-origin:center;

        width:100%;

        height:100%;

        position:relative;

    }

    .item{

        -webkit-transform-origin:center;

        width:198px;

        height:300px;

        position:absolute;

        background:none;

        text-align:center;

        line-height:300px;

    }

    .itemOne{

        left:-50px;

        -webkit-transform:translateZ(87px) rotateY(-60deg);

        background:#f00;

    }

    .itemTwo{

        left:100px;

        -webkit-transform:translateZ(173px);

        background:#ff0;

    }

    .itemThree{

        left:250px;

        -webkit-transform:translateZ(87px) rotateY(60deg);

        background:#0ff;

    }

    .itemFour{

        left:250px;

        -webkit-transform:translateZ(-87px) rotateY(120deg);

        background:#0f0;

    }

    .itemFive{

        left:100px;

        -webkit-transform:translateZ(-173px) rotateY(180deg);

        background:#0ff;

    }

    .itemSix{

        left:-50px;

        -webkit-transform:translateZ(-87px) rotateY(-120deg);

        background:#00f;

    }

    .rotate:hover{

        -webkit-animation-play-state:paused;

    }

    </style>

</head>

<body>

    <div class="wapper">

        <div class="rotate">

            <div class="item itemOne">1</div>

            <div class="item itemTwo">2</div>

            <div class="item itemThree">3</div>

            <div class="item itemFour">4</div>

            <div class="item itemFive">5</div>

            <div class="item itemSix">6</div>

        </div>

    </div>

</body>

</html>

css3 走马灯效果的更多相关文章

  1. 小程序 css3走马灯效果

    <view class='notable-container' style='background:#ffffff;'> <view style='z-index:2000;back ...

  2. vue 实现走马灯效果

    Part.1  问题 在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果 Part.2  实现 我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 ...

  3. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  4. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  5. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  6. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  7. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  8. Android TextView走马灯效果

    布局: <TextView android:id="@+id/myTextView" android:layout_width="match_parent" ...

  9. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

随机推荐

  1. P2446 [SDOI2010]大陆争霸

    \(\color{#0066ff}{ 题目描述 }\) 幻想历8012年5月12日深夜,斯普林·布拉泽降下神谕:"Trust me, earn eternal life."克里斯军 ...

  2. JEECG入门

    姓名:陈中娇    班级:软件151 1.准备: 下载Jdk1.6+.myeclipse.tomcat6.0.MySQL数据库.jeecg-framework压缩包 2.安装:①.安装jdk,配置好环 ...

  3. 3. mybatis # 与 $ 的区别

    mybatis # 与 $ 的区别 1.# % 号必须写在test中 应用场景:模糊查询 配置文档mapper.xml <select id="selectBlogByTitle&qu ...

  4. Navicat安装教程、建表教程

    1.安装教程: 转自:https://www.jianshu.com/p/5f693b4c9468 2.使用教程(建表操作): https://jingyan.baidu.com/article/e6 ...

  5. HDU-Digital Roots(思维+大数字符串模拟)

    The digital root of a positive integer is found by summing the digits of the integer. If the resulti ...

  6. Java String 字符串操作小结

    // 转载加编辑 -- 21 Apr 2014 1. Java字符串中子串的查找 Java中字符串中子串的查找共有四种方法,如下: 1.int indexOf(String str) :返回第一次出现 ...

  7. redis 集合

    > SADD myset1 a b c (integer) > SADD web maiziedu.com (integer) > SADD web maiziedu.com (in ...

  8. linux下lua运行环境安装

    1.下载安装包: [root@H0f ~]# wget  http://www.lua.org/ftp/lua-5.2.4.tar.gz    http://www.lua.org/ftp/lua-5 ...

  9. linux 查看页大小

    # getconf PAGE_SIZE 一般是4096

  10. Java基础13-数组算法

    1.数组的复制 //复制算法,将arr1数组的值复制给arr2数组 import java.util.Arrays; public class Test1{ public static void ma ...