3D 变换

1. 在 2D 父元素中，绕轴旋转，效果需要想象

    1. #ele_3d {
          width:
    2.     transform: rotateX(2deg);
    3. }
    1. rotateX 为正，元素左上角往里跑。。。对象在 x 轴上的旋转角度，正方向向右
    1. rotateY 为正，元素左上角往外跑。。。对象在 x 轴上的旋转角度，正方向向上
    1. rotateZ 为正，元素在视觉上顺时针旋转。。。对象在 z 轴上的旋转角度，正方向向屏幕外

2. 给父元素设置 transform-style: preserve-3d; 开启 3D 空间

    1. #box_3d {
    2.     width: 300px;
    3.     height: 300px;
    4.     background-color: #f006;
    5.  
    6.     /* 开启 3D 空间 */
    7.     transform-style: preserve-3d;
    8.           /*
    9.         transform-style:
    10.            只有两个属性值：
    11.                    flat         （默认值）表示所有子元素在2D平面呈现
    12.                    preserve-3d， 表示所有子元素在3D平面呈现，（prederve是保护、维持的意思，preserve-3d就是保持三维空间的意思）
    13.  
    14.             */
    15.     /* 实现近大远小 :  景深 */
    16.     perspective:;
    17. }

3. 拓展

  • perspective: 300;
  • 往景深里走，元素会越来越小
    • perspective 用于激活一个3D空间，属性值就是景深大小（默认none无景深）
    • 开启 3D 空间 元素的所有后代元素都会受影响，（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）
  • 参数大于等于 0（不能为负）
  • 景深中心点 perspective-origin: 50% 50%; （视锥顶点）

    • 改变观察者 的视觉
    • 给谁设置的 perspective ，就给谁设置 perspective-origin
  • perspective 的值越大，元素的效果越接近于 2D 变换的效果。
    • 给父元素设置景深
    • transform: perspective(300px);
    • 给子元素设置景深
    • transform: perspectiv(300px) translate(-200px);
  • 元素背面是否可见
  • backface-visibity: visible;    // 默认值
  • backface-visibity: visible;    // 背面是不可见的
  • scaleZ(2);    // 会使元素的厚度变成 2 ，默认为 1。。。到 scaleZ(0); 时元素消失
  • 变换基点    综合变换
  • 变换基点 transform-origin: 50% 50% 0;    ____几何元素最中心为 xyz点：
    • transform-origin: top;
    • transform-origin: left;
    • transform-origin: right;
    • transform-origin: bottom;
    • transform-origin: 100px 100px 0;    /* 变换基点的 z 只能使用具体数值 */ 
    • transform-origin:  top left;
    • transform-origin:  bottom right;

3D 旋转盒子

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <title>3D 旋转盒子</title>
    6.  
    7.         <style type="text/css">
    8.             body {
    9.                 width: 100%;
    10.                 color: #000;
    11.                 background: #96b377;
    12.                 font: 14px Helvetica, Arial, sans-serif;
    13.  
    14.                 padding: 600px;
    15.             }
    16.  
    17.             /**** CSS3 3D 盒子****/
    18.             #six_3d_box {
    19.                 position: relative;
    20.                 width: 600px;
    21.                 height: 600px;
    22.  
    23.                 transform-style: preserve-3d;    /* 开启 父元素 3D 空间 */
    24.  
    25.                 transform-origin: 50% 50% -300px;
    26.  
    27.                 list-style: none;
    28.             }
    29.  
    30.             #six_3d_box li {
    31.                 position: absolute;
    32.                 width: 600px;
    33.                 height: 600px;
    34.  
    35.                 line-height: 600px;
    36.                 text-align: center;
    37.             }
    38.  
    39.             #six_3d_box li.one {
    40.                 top: 0px;
    41.                 left: 0px;
    42.  
    43.                 background-color: #ddd3;
    44.             }
    45.  
    46.             #six_3d_box li.two {
    47.                 top: -600px;
    48.                 left: 0px;
    49.  
    50.                 transform-origin: 50% 100% 0;
    51.                 transform: rotateX(90deg);
    52.  
    53.                 background-color: #ccc3;
    54.             }
    55.  
    56.             #six_3d_box li.three {
    57.                 top: 0px;
    58.                 left: 600px;
    59.  
    60.                 transform-origin: 0 50% 0;
    61.                 transform: rotateY(90deg);
    62.  
    63.                 background-color: #eee3;
    64.             }
    65.  
    66.             #six_3d_box li.four {
    67.                 top: 0px;
    68.                 left: -600px;
    69.  
    70.                 transform-origin: 100% 50% 0;
    71.                 transform: rotateY(-90deg);
    72.  
    73.                 background-color: #cfe3;
    74.             }
    75.  
    76.             #six_3d_box li.five {
    77.                 top: 600px;
    78.                 left: 0px;
    79.  
    80.                 transform-origin: 50% 0 0;
    81.                 transform: rotateX(-90deg);
    82.  
    83.                 background-color: #efc3;
    84.             }
    85.  
    86.             #six_3d_box li.six {
    87.                 top: 0px;
    88.                 left: 0px;
    89.  
    90.                 transform: translateZ(-600px) rotateY(180deg);    /* 沉底 翻一面 */
    91.  
    92.                 background-color: #afa3;
    93.             }
    94.  
    95.         </style>
    96.     </head>
    97.  
    98.     <body>
    99.  
    100.         <ul id="six_3d_box">
    101.             <li class="one">1</li>
    102.             <li class="two">2</li>
    103.             <li class="three">3</li>
    104.             <li class="four">4</li>
    105.             <li class="five">5</li>
    106.             <li class="six">6</li>
    107.         </ul>
    108.  
    109.         <!-- javascript 代码 -->
    110.         <script type="text/javascript">
    111.  
    112.             var theBox = document.getElementById("six_3d_box");
    113.             var boxX = 0;
    114.             var boxY = 0;
    115.  
    116.             var isRight = true;
    117.             window.setInterval(function(){
    118.                 if(isRight){
    119.                     boxX++;
    120.                     boxY++;
    121.                 }else{
    122.                     boxX--;
    123.                     boxY--;
    124.                 };
    125.  
    126.                 if(Math.abs(boxX) >= 360 || Math.abs(boxY) >= 360){
    127.                     isRight = !isRight;
    128.                 };
    129.  
    130.                 theBox.style.transform = "rotateX("+boxX+"deg) rotateY("+boxY+"deg)";
    131.             },30);
    132.  
    133.         </script>
    134.     </body>
    135. </html>

 3D 盒子的炸裂    3D 盒子中的 3D 盒子

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <title>3D 盒子的炸裂，3D 盒子中的 3D 盒子</title>
    6.  
    7.         <style type="text/css">
    8.             body {
    9.                 width: 100%;
    10.                 color: #000;
    11.                 background: #96b377;
    12.                 font: 14px Helvetica, Arial, sans-serif;
    13.  
    14.                 padding: 600px;
    15.             }
    16.  
    17.             /**** CSS3 3D 盒子****/
    18.             #six_3d_box>li>img {
    19.                 width: 400px;
    20.                 height: 400px;
    21.             }
    22.  
    23.             #inner_3d_box>li>img {
    24.                 width: 200px;
    25.                 height: 200px;
    26.             }
    27.  
    28.             #six_3d_box {
    29.                 position: relative;
    30.                 width: 400px;
    31.                 height: 400px;
    32.  
    33.                 transform-style: preserve-3d;    /* 开启 父元素 3D 空间 */
    34.  
    35.                 transform-origin: 50% 50% -200px;
    36.                 transform: rotateX(0deg) rotateY(0deg);
    37.  
    38.                 list-style: none;
    39.             }
    40.  
    41.             #six_3d_box>li {
    42.                 position: absolute;
    43.                 width: 400px;
    44.                 height: 400px;
    45.  
    46.                 line-height: 400px;
    47.                 text-align: center;
    48.                 transition: 1s all ease 0s;
    49.             }
    50.  
    51.             #six_3d_box:hover>li>img {
    52.                 transform: scale(160px);
    53.             }
    54.  
    55.             #six_3d_box>li.one {
    56.                 top: 0px;
    57.                 left: 0px;
    58.  
    59.                 background-color: #ddd0;
    60.             }
    61.  
    62.             #six_3d_box:hover>li.one {
    63.                 transform: translateZ(160px);
    64.             }
    65.  
    66.             #six_3d_box>li.two {
    67.                 top: -100%;
    68.                 left: 0px;
    69.  
    70.                 transform-origin: 50% 100% 0;
    71.                 transform: rotateX(90deg);
    72.  
    73.                 background-color: #ccc0;
    74.             }
    75.  
    76.             #six_3d_box:hover>li.two {
    77.                 transform:rotateX(90deg) translateZ(160px);
    78.             }
    79.  
    80.             #six_3d_box>li.three {
    81.                 top: 0px;
    82.                 left: 100%;
    83.  
    84.                 transform-origin: 0 50% 0;
    85.                 transform: rotateY(90deg);
    86.  
    87.                 background-color: #eee0;
    88.             }
    89.  
    90.             #six_3d_box:hover>li.three {
    91.                 transform:rotateY(90deg) translateZ(160px);
    92.             }
    93.  
    94.             #six_3d_box>li.four {
    95.                 top: 0px;
    96.                 left: -100%;
    97.  
    98.                 transform-origin: 100% 50% 0;
    99.                 transform: rotateY(-90deg);
    100.  
    101.                 background-color: #cfe0;
    102.             }
    103.  
    104.             #six_3d_box:hover>li.four {
    105.                 transform: rotateY(-90deg) translateZ(160px);
    106.             }
    107.  
    108.             #six_3d_box>li.five {
    109.                 top: 100%;
    110.                 left: 0px;
    111.  
    112.                 transform-origin: 50% 0 0;
    113.                 transform: rotateX(-90deg);
    114.  
    115.                 background-color: #efc0;
    116.             }
    117.  
    118.             #six_3d_box:hover>li.five {
    119.                 transform: rotateX(-90deg) translateZ(160px);
    120.             }
    121.  
    122.             #six_3d_box>li.six {
    123.                 top: 0px;
    124.                 left: 0px;
    125.  
    126.                 transform:rotateY(180deg) translateZ(400px) ;    /* 翻一面 沉底 */
    127.  
    128.                 background-color: #afa0;
    129.             }
    130.  
    131.             #six_3d_box:hover>li.six {
    132.                 transform: rotateY(180deg) translateZ(560px);
    133.             }
    134.  
    135.             /**** Inner 3D Box ****/
    136.             #inner_3d_box {
    137.                 position: absolute;
    138.                 top: 50%;
    139.                 left: 50%;
    140.                 margin-top: -100px;
    141.                 margin-left: -100px;
    142.  
    143.                 width: 200px;
    144.                 height: 200px;
    145.  
    146.                 transform-style:preserve-3d;
    147.                 transform-origin: 50% 50% -100px;
    148.                 transform: translateZ(-100px);
    149.  
    150.                 list-style: none;
    151.                 background-color: #f000;
    152.             }
    153.  
    154.             #inner_3d_box>li {
    155.                 width: 200px;
    156.                 height: 200px;
    157.  
    158.                 position: absolute;
    159.  
    160.                 line-height: 200px;
    161.                 text-align: center;
    162.                 transition: 1s all ease 0s;
    163.             }
    164.  
    165.             #inner_3d_box>li.inner_1 {
    166.                 top: 0px;
    167.                 left: 0px;
    168.             }
    169.  
    170.             #inner_3d_box>li.inner_2 {
    171.                 top: -100%;
    172.                 left: 0px;
    173.  
    174.                 transform-origin: 50% 100% 0;
    175.                 transform: rotateX(90deg);
    176.  
    177.                 background-color: #ccc0;
    178.             }
    179.  
    180.             #inner_3d_box>li.inner_3 {
    181.                 top: 0px;
    182.                 left: 100%;
    183.  
    184.                 transform-origin: 0 50% 0;
    185.                 transform: rotateY(90deg);
    186.  
    187.                 background-color: #eee0;
    188.             }
    189.  
    190.             #inner_3d_box>li.inner_4 {
    191.                 top: 0;
    192.                 left: -100%;
    193.  
    194.                 transform-origin: 100% 50% 0;
    195.                 transform: rotateY(-90deg);
    196.  
    197.                 background-color: #cfe0;
    198.             }
    199.  
    200.             #inner_3d_box>li.inner_5 {
    201.                 top: 100%;
    202.                 left: 0px;
    203.  
    204.                 transform-origin: 50% 0 0;
    205.                 transform: rotateX(-90deg);
    206.  
    207.                 background-color: #efc0;
    208.             }
    209.  
    210.             #inner_3d_box>li.inner_6 {
    211.                 top: 0px;
    212.                 left: 0px;
    213.  
    214.                 transform: translateZ(-200px) rotateY(180deg);
    215.             }
    216.         </style>
    217.     </head>
    218.  
    219.     <body>
    220.  
    221.         <ul id="six_3d_box">
    222.             <li class="one"><img src="./img/Start.jpg" /></li>
    223.             <li class="two"><img src="./img/Loki2.jpg" /></li>
    224.             <li class="three"><img src="./img/StanLee.jpg" /></li>
    225.             <li class="four"><img src="./img/Thanos.jpg" /></li>
    226.             <li class="five"><img src="./img/Thor.jpg" /></li>
    227.             <li class="six"><img src="./img/YonDu.jpg" /></li>
    228.             <ul id="inner_3d_box">
    229.                 <li class="inner_1"><img src="./img/BlackWidow.jpg" /></li>
    230.                 <li class="inner_2"><img src="./img/Deadpool.jpg" /></li>
    231.                 <li class="inner_3"><img src="./img/Groot.jpg" /></li>
    232.                 <li class="inner_4"><img src="./img/Hock.jpg" /></li>
    233.                 <li class="inner_5"><img src="./img/RocketRaccoon.jpg" /></li>
    234.                 <li class="inner_6"><img src="./img/SpiderMan.jpg" /></li>
    235.             </ul>
    236.         </ul>
    237.  
    238.         <!-- javascript 代码 -->
    239.         <script type="text/javascript">
    240.  
    241.             var theBox = document.getElementById("six_3d_box");
    242.             var boxX = 0;
    243.             var boxY = 0;
    244.  
    245.             var isRight = true;
    246.             window.setInterval(function(){
    247.                 if(isRight){
    248.                     boxX++;
    249.                     boxY++;
    250.                 }else{
    251.                     boxX--;
    252.                     boxY--;
    253.                 };
    254.  
    255.                 if(Math.abs(boxX) >= 360 || Math.abs(boxY) >= 360){
    256.                     isRight = !isRight;
    257.                 };
    258.  
    259.                 theBox.style.transform = "rotateX("+boxX+"deg) rotateY("+boxY+"deg)";
    260.             },30);
    261.  
    262.         </script>
    263.     </body>
    264. </html>

CSS3_3D 变换的更多相关文章

  1. BZOJ 1692: [Usaco2007 Dec]队列变换 [后缀数组 贪心]

    1692: [Usaco2007 Dec]队列变换 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1383  Solved: 582[Submit][St ...

  2. Hilbert-Huang Transform（希尔伯特-黄变换）

    在我们正式开始讲解Hilbert-Huang Transform之前,不妨先来了解一下这一伟大算法的两位发明人和这一算法的应用领域 Section I 人物简介 希尔伯特:公认的数学界“无冕之王”,1 ...

  3. 【Win 10 应用开发】三维变换

    所谓三维变换,其实是在二维平面上产生三维的视觉效果.前面老周简单提了一下透视效果,如果透视效果不能满需求,那可以考虑用三维变换. UIElement类有一个属性叫Transform3D,它定义的类型为 ...

  4. CSS3之3d变换与关键帧

    3d变换是在transform基础上实现的 transform-style:preserve-3d; 建立3d空间 perspective:; 景深(设置用户看的距离) perspective-ori ...

  5. 纯CSS3实现多层云彩变换飞行动画

    查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...

  6. CSS3之过渡及2D变换

    transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...

  7. 为什么FFT时域补0后，经FFT变换就是频域进行内插？

    应该这样来理解这个问题: 补0后的DFT(FFT是DFT的快速算法),实际上公式并没变,变化的只是频域项(如:补0前FFT计算得到的是m*2*pi/M处的频域值, 而补0后得到的是n*2*pi/N处的 ...

  8. 相机变换与Ray-Casting

    p { margin-bottom: 0.1in; direction: ltr; line-height: 120%; text-align: justify; orphans: 0; widows ...

  9. 关于CSS3的小知识点之2D变换

        transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形 ...

随机推荐

  1. 金融量化分析【day112】:股票数据分析Tushare1

    目录 1.使用tushare包获取某股票的历史行情数据 2.输出该股票所有收盘比开盘上涨3%以上的日期 3.输出该股票所有开盘比前日收盘跌幅超过2%的日期 4.假如我从2010年1月1日开始,每月第一 ...

  2. [物理学与PDEs]第3章习题6 Lagrange 坐标下的一维理想磁流体力学方程组的数学结构

    试讨论 Lagrange 形式下的一维理想磁流体力学方程组 (5. 33)-(5. 39) 的类型. 解答: 由 (5. 33), (5. 39) 知 $$\bex 0=\cfrac{\p p}{\p ...

  3. jQuery1.9及以上版本检测IE版本号

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...

  4. Java 多线程总结

    昨天熬了个通宵,看了一晚上的视频,把java 的多线程相关技术重新复习了一遍,下面对学习过程中遇到的知识点进行下总结. 首先我们先来了解一下进程.线程.并发执行的概念: 进程是指:一个内存中运行的应用 ...

  5. Subsequence（序列自动机模板题）

    题目链接:https://nanti.jisuanke.com/t/38232 题目大意:给你一个字符串,然后再给你m个字符串,然后问你在第一个字符串中不连续的子串能不能构成输入的子串. 具体思路:构 ...

  6. HBSX2019 游记

    Day -4 训练戳SX2019 3月训练 ZJOI2019 Day1几天前就考了 T1真考了麻将QwQ 九条可怜的毒瘤真的是业界良心 今天中午才起,要开始调整生物钟了 9012HBOIers群里讨论 ...

  7. Web从入门到放弃<3>

    UI简单的美化全部来源于Bootstrap 知识来自<javascript dom编程艺术第二版> <1> 点击列表 页面不跳转图片刷新:  主要点: href如何点击完如何不 ...

  8. MinGW GCC 8.1.0 2018年5月2日 出炉啦

    MSYS_MinGW-w64_GCC_810_x86-x64.7z for x86 x64 59.0 MB发布日期: 2018-05-04 下载地址:https://sourceforge.net/p ...

  9. 【原创】大数据基础之CM5（Cloudera Manager）+CDH5离线安装

    CM/CDH 5.16.1 CM官方:https://www.cloudera.com/products/product-components/cloudera-manager.html CDH官方: ...

  10. python第六篇文件处理类型

    阅读目录 一 文件操作 二 打开文件的模式 三 操作文件的方法 四 文件内光标移动 五 文件的修改   文件处理                                             ...