参考资料：

张鑫旭  ： http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

Demo : Demo (建议移动端看,因为用了Zepto.js)

Demo截图：

Demo代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=640,user-scalable=no"/>

    <title>Document</title>

    <style>

    *{ margin:0;padding:0;}

    body,html{width:100%;height:100%; perspective:10000px;-webkit-perspective:10000px; background-color: #fff;-webkit-transition: top .5s;transition: top .5s;overflow:hidden;}

    .main{ width:100%;height:100%; margin-left:120px;transform-origin: center center; }

    .box{ position:relative;width:100%;height:100%;transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transition: transform 1s;-webkit-transition: -webkit-transform 1s;transform-origin: 200px center; -webkit-transform-origin: 200px center; }

    .box .piece{position: absolute;left:0;top:20%;width:400px;height:50%;-webkit-transition: opacity 1s, transform 1s;transition: opacity 1s, transform 1s; border:5px solid #ccc; -webkit-box-sizing: border-box; background: rgba(0,0,0,.5);transform-origin: center center;-webkit-transform-origin: center center; }

    .box .piece:nth-child(1){ background-color: red;}

    .box .piece:nth-child(2){ background-color: blue;}

    .box .piece:nth-child(3){ background-color: yellow;}

    .box .piece:nth-child(4){ background-color: pink;}

    .box .piece:nth-child(5){ background-color: purple;}

    .box .piece:nth-child(6){ background-color: black;}

    .box .piece:nth-child(7){ background-color: white;}

    .box .piece:nth-child(8){ background-color: gray;}

    .box .piece:nth-child(9){ background-color: orange;}

    .box .piece:nth-child(10){ background-color: violet;}

    </style>

<script src="zepto.min.js"></script>

<script>

$(function(){

    var $oBox = $('#box'),

        $aPieces = $oBox.find('.piece'),

        winWidth = $(window).width(),

        transform = (function(){

             var arr = [ 'transform','webkitTransform','mozTransform','oTransform','msTransform' ];

             var oDiv = document.createElement('div');

             for( var i=0,len=arr.length;i<len;i++ ){

                 if( oDiv.style[ arr[i] ] != undefined ){

                     return arr[i];

                 }

             }

         })();

    for( var i=0,len=$aPieces.length;i<len;i++ ){

        var deg = 360/len*i;

        var imgWidth = $aPieces.eq(i).width()/2;

        var piecesWidth = $aPieces.eq(0).width();

        var z = imgWidth/Math.tan(360/len/ 180 * Math.PI) + piecesWidth ;

        $aPieces[i].style[ transform ] = " rotateY("+ deg +"deg) translateZ("+ z +"px)";

    }

    var num = 0;

    var oBox = document.querySelector('#box');

    $(document).swipeLeft(function(){ 

        num++;

        var left = -(360 / $aPieces.length)*num;

        oBox.style[ transform ] = 'rotateY('+left+'deg)';

        return false;

    });

    $(document).swipeRight(function(){

        num--;

        var left = -(360 / $aPieces.length)*num;

        oBox.style[ transform ] = 'rotateY('+left+'deg)';

        return false;

    });

})

</script>

</head>

<body>

    <div class="main" >

        <div class="box" id="box" >

            <div class="piece" >1</div>

            <div class="piece" >2</div>

            <div class="piece" >3</div>

            <div class="piece" >4</div>

            <div class="piece" >5</div>

            <div class="piece" >6</div>

            <div class="piece" >7</div>

            <div class="piece" >8</div>

            <div class="piece" >9</div>

            <div class="piece" >10</div>

        </div>

    </div>

</body>

</html>

后记:

其实看完这个 张鑫旭 的文章就应该会做了，因为我这的当时是最近看了支付宝芝麻信用里的信用猜猜那个想做的这个demo 最开始以为是围着一个点转圈做的后来想到 张鑫旭 文章跟着做了这个

主要还是根据Math.tan求这个z轴的距离然后就是perspective景深的设置,像 向左滑动，向右滑动偷懒用了 Zepto.js 的 swipeLeft、swipeRight 事件，其实想根据这个有多少面去算这个 两个 面的间隔但是后来发现没什么规律所以放弃了，当然如果有好的建议谢谢告知。

css3 - 旋转的木马的更多相关文章

  1. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. css3旋转小三角

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  4. CSS3 旋转 太阳系

    参考https://www.tadywalsh.com/web/cascading-solar-system/ 首先 旋转有两种方式  一种是使用 transform-origin  另一种是tran ...

  5. css3旋转

    首先创建一个容器如div,然后设置其相关的3d属性,主要是三个1.perspective 透视,值越小3D感越强,值越大视觉正常.2.perspective-origin,透视点一般居于容器的中心.3 ...

  6. CSS3 旋转代码备忘

    .Aclose { -webkit-transition-property: all; -webkit-transition-duration: .3s; -moz-transition-proper ...

  7. CSS3旋转缩放移动倾斜等效果——transform

    1.transform浏览器支持情况 也就是说目前不考虑老浏览器的话是不用加前缀的,感谢菜鸟教程:https://www.runoob.com/cssref/css3-pr-transform.htm ...

  8. css3旋转、过渡、动画属性

    1.transform 该属性对元素进行旋转.缩放.移动和倾斜 translate元素从当前位置移动 rotate元素顺时针旋转 scale元素的尺寸增大或减小 skew元素翻转 2.transiti ...

  9. css3旋转立方体-_-

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. cdqz2017-test1-数论 （BSGS + 二次剩余 + CRT）

    若m=0, 就是求n^2n ≡ x mod p (x--) 因为一定优解,所以x一定是p的二次剩余 令g为p的1个原根,且g^k ≡ x mod p 则k是偶数,证明k是偶数: 假设 g1^k1 ≡ ...

  2. HDU 1033(坐标移动 模拟)

    题意是说有一点从(300,410)的位置出发,向右移动到(310,410)后开始转向,A 表示向顺时针转,V 表示向逆时针转,每次转向后沿当前方向前进 10 个单位, 输出其坐标,再补充一点格式上的东 ...

  3. Linux 下装逼技巧

    ``` 1.下载cmatrix-1.2a.tar.gz文件 [root@localhost ~]# wget https://jaist.dl.sourceforge.net/project/cmat ...

  4. time 模块 与 datetime 模块

    3 print(time.time()) # 时间戳:1487130156.419527 4 print(time.strftime("%Y-%m-%d %X")) #格式化的时间 ...

  5. vue-router路由

    Vue Router 是 Vue.js 官方的路由管理器 自动全局安装: vue create 项目名称 手动配置: 1.安装 在app项目文件夹里面 npm i vue-router 2.在min. ...

  6. Silverlight程序之修改命名空间

    有时候,为了使用已有的代码,可能需要更改主程序的命名空间,以生成新的应用.修改命名空间,不能胡乱一通全部使用“替换”,否则程序可能无法正常运行.通过笔者实践,主要有以下几个地方需要注意(以WebGIS ...

  7. springboot11-01-security入门

    场景: 有3个页面:首页.登录页.登录成功后的主页面,如下图: 如果没有登录,点击“去主页”,会跳转到登录页 如果已经登录,点击“去主页”,跳转到主页,显示“hello 用户名” 下面用springb ...

  8. 状压DP初探·总结

    2018过农历新年这几天,学了一下状态压缩动态规划,现在先总结一下.   状态压缩其实是一种并没有改变dp本质的优化方法,阶段还是要照分,状态还是老样子,决策依旧要做,转移方程还是得列,最优还是最优, ...

  9. CF809C Find a car

    传送门 luogu 其实这题的某个位置\((i,j)\)的数是\((i-1)\mathrm{xor}(j-1)+1\) 首先一个矩形的答案可以拆成\((x2,y2)-(x1-1,y2)-(x2,y1- ...

  10. Spark SQL自定义外部数据源

    1 涉及到的API BaseRelation: In a simple way, we can say it represents the collection of tuples with know ...