zoukankan      html  css  js  c++  java
  • CSS3 3D transform变换

    、实际应用-图片的旋转木马效果

    您可以狠狠地点击这里:图片的旋转木马效果demo

    建议在足够新版本的FireFox浏览器或Safari浏览器下观看,Chrome可能需要居中定位查看,下图为效果缩略图:
    图片3D旋转木马效果截图 张鑫旭-鑫空间-鑫生活

    原理:
    那些看上去很酷酷的CSS3 3D效果其实就颠来倒去那几个属性(本文提到的这几个),折腾来折腾去,这里这个效果显然也是如此。

    首先HTML结构,如下:

    舞台
        容器
            图片
            图片
            图片
            ...

    对于舞台,很简单,加个视距,比方说800像素:

     perspective: 800px;

    对于容器,很简单,加个3D视图声明,如下:

    transform-style: preserve-3d;

    然后就是图片们了。为了不至于产生类似DNA的螺旋状效果,我们让所有图片position:absolute,公用同一个中心点。

    显然,图片旋转木马是类似钢管舞旋转的运动,因此,我们关心的是rotateY的大小。

    因为要正好绕成一个圈,因此,图片rotateY值正好0~360等分,于是,如果有9张图片,则每个图片的旋转角度累加40(360 / 9 = 40)度即可。因此有:

    img:nth-child(1) { transform: rotateY(   0deg ); }
    img:nth-child(2) { transform: rotateY(  40deg ); }
    img:nth-child(3) { transform: rotateY(  80deg ); }
    img:nth-child(4) { transform: rotateY( 120deg ); }
    img:nth-child(5) { transform: rotateY( 160deg ); }
    img:nth-child(6) { transform: rotateY( 200deg ); }
    img:nth-child(7) { transform: rotateY( 240deg ); }
    img:nth-child(8) { transform: rotateY( 280deg ); }
    img:nth-child(9) { transform: rotateY( 320deg ); }

    这样就好了吗?

    No, No, No!!!

    想想看那,虽然9个绝色美女每个人的方位不一样,但都站在同一个点上,早就挤作一团,A罩都挤成C了,显然是不行的(见下图只设置rotateY)!我们需要拉开空间~~

    只设置rotateY时候,众多美女图片挤作一团

    如何拉开空间,很简单。

    想想看那:9个美女,分别面朝东南西北共9个不同方位,她们只要每个人向前走个4~5步,美女们之间的空间不久拉开了,呈现圆形了!想象一下夜空中,礼花绽开的场景~~

    这里的向前走4~5步,聪明的人应该已经知道了,就是本文提到的translateZ, 当translateZ为正值的时候,元素会向其面对的方向走去;如果元素无旋转,就会朝显示器走来!!

    现在只剩下一个问题了,美女们要向前走多远呢??

    这个距离是有计算公式滴!

    拿本demo距离,每张美女图片的宽度是128像素,因此,有如下理想方位效果图:
    旋转木马效果理想方位图 张鑫旭-鑫空间-鑫生活

    上图中红色标注的r就是的demo页面中图片要translateZ的理想值(该值可以让所有图片无缝围成一个圆)!

    r的计算很简单,有初中数学水平的人应该都会:

    r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8

    demo页面为了好看,图片之间留了点间距,使用的translateZ的值为175.8 + 20 = 195.8.
    旋转木马demo页面translateZ值大小

  • 相关阅读:
    1105 Spiral Matrix (25分)(蛇形填数)
    1104 Sum of Number Segments (20分)(long double)
    1026 Table Tennis (30分)(模拟)
    1091 Acute Stroke (30分)(bfs,连通块个数统计)
    1095 Cars on Campus (30分)(排序)
    1098 Insertion or Heap Sort (25分)(堆排序和插入排序)
    堆以及堆排序详解
    1089 Insert or Merge (25分)
    1088 Rational Arithmetic (20分)(模拟)
    1086 Tree Traversals Again (25分)(树的重构与遍历)
  • 原文地址:https://www.cnblogs.com/huangshikun/p/6560852.html
Copyright © 2011-2022 走看看