一、CSS3-3D转换

1.3D

特点：近大远小，物体和面遮挡不可见

1.1三维坐标系

x 轴：水平向右 -- x 轴右边是正值，左边是负值

y 轴：垂直向下 -- y 轴下面是正值，上面是负值

z 轴：垂直屏幕 -- 往外边的是正值，往里面的是负值

2.3D移动tranlate3d

2.1 语法

  1. transform:translate3d(x,y,z);
  2. transform:translateZ(z);

2.2用法

  1.         .box3 {
  2.             /* 向里面移动100 */
  3.             transform: translateZ(-100px);
  4.         }
  6.         .box4 {
  7.             /* 向右移动50，向下移动50，向外移动50 */
  8.             /* translate3d */
  9.             transform: translate3d(50px, 50px, 50px);
  10.         }
  12.         .box5 {
  13.             /* 向里面移动100 */
  14.             /* translate3d里面的值不能省略，没有就写0 */
  15.             transform: translate3d(0, 0，-100px);
  16.         }

2.3总结

1.translate3d里面的3d要小写。

2.translate3d后面的值一定是三个值(x,y,z)，不能省略，没有的就写0，且顺序不能颠倒。

3.3d的z值一般都是精准的像素值。

4.z值为正数就是往外面移动，为负数就是往里面移动

3.透视perspective

1.产生3d效果必须写透视。

2.透视就是视距，即人眼到屏幕的距离。

3.近大远小

4.透视prespective的单位是像素

5.透视写在被观察元素的父盒子上。

4.3D转换之移动—translatedZ

给父元素加perspective后，再给子元素添加translateZ会产生近大远小。

  1.         body {
  2.             /* 人眼距屏幕500px */
  3.             perspective: 500px;
  4.         }
  6.         .box1 {
  7.         /*变小*/
  8.             transform: translateZ(-100px);
  9.         }
  11.         .box2 {
  12.         /*变大*/
  13.             transform: translateZ(100px);
  14.         }

5.3D转换之旋转—rotate

  • transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
  • transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
  • transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
  • transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

5.1 rotateX

transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度，即上边向后转

transform: rotateX(-45deg) -- 沿着 x 轴反方向旋转 45 度，即上边向前转

5.2 rotateY

transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度，即右边向后转

transform: rotateY(-45deg) -- 沿着 y 轴反方向旋转 45 度，即左边向后转

5.3 rotateZ

transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度，即顺时针

transform: rotateZ(-45deg) -- 沿着 z 轴反方向旋转 45 度，即逆时针

5.4 rotate3d

transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

transform: rotate3d(1, 1, 0, 45deg) -- 沿着左上右下对角线旋转 45度

rotate()默认就是rotatez()。

6 3D呈现—transfrom-style

控制子元素是否开启三维立体环境 ，真3d。

6.1 用法

  1.             /* 给父元素加preserve-3d */
  2.             /* 默认是flat,不开启三维立体环境 */
  3.             /* transform-style: flat; */
  4.             transform-style: preserve-3d;

6.2总结

1.代码给父亲加，影响的是子元素

2.默认是flat,不开启，preserve-3d开启

3.作用是当父元素3d变换时，子元素任然保留之前的3d状态。

6.3 与视距的区别

preserve-3d是真3D，让子元素保留了3D空间。

perspective是伪3D，傻瓜式近大远小，只是起辅助视觉观察效果的作用。

7.案例

7.1翻转盒子案例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         body {
  10.             perspective: 400px;
  11.         }
  13.         .box {
  14.             position: relative;
  15.             width: 300px;
  16.             height: 300px;
  17.             margin: 100px auto;
  18.             border-radius: 50%;
  19.             transition: all .3s;
  20.             /* 要保留子盒子的三维立体环境 */
  21.             transform-style: preserve-3d;
  22.         }
  24.         .box:hover {
  25.             transform: rotateY(180deg);
  26.         }
  28.         .box::before,
  29.         .box::after {
  30.             position: absolute;
  31.             top: 0;
  32.             left: 0;
  33.             width: 100%;
  34.             height: 100%;
  35.             line-height: 300px;
  36.             text-align: center;
  37.             border-radius: 50%;
  38.             font-size: 30px;
  39.             color: #fff;
  40.         }
  42.         .box::before {
  43.             content: "小艾同学";
  44.             background-color: #09f;
  45.             /* 提高层级，让他在前面 */
  46.             z-index: 1;
  47.         }
  49.         .box::after {
  50.             content: "加油鸭~";
  51.             background-color: #90f;
  52.             /* 先让盒子反过来，和before背靠背 */
  53.             transform: rotateY(180deg);
  54.         }
  55.     </style>
  56. </head>
  58. <body>
  59.     <div class="box"></div>
  60. </body>
  62. </html>

7.2 3D旋转导航栏

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         li {
  15.             float: left;
  16.             margin: 100px 5px 0;
  17.             list-style: none;
  18.             width: 120px;
  19.             height: 35px;
  20.             perspective: 500px;
  21.         }
  23.         .box {
  24.             position: relative;
  25.             width: 100%;
  26.             height: 100%;
  27.             transform-style: preserve-3d;
  28.             transition: all .4s;
  29.         }
  31.         /* 鼠标经过，向上翻转90度 */
  32.         .box:hover {
  33.             transform: rotateX(90deg);
  34.         }
  36.         .box::after,
  37.         .box::before {
  38.             position: absolute;
  39.             left: 0;
  40.             top: 0;
  41.             width: 100%;
  42.             height: 100%;
  43.             line-height: 35px;
  44.             text-align: center;
  45.         }
  47.         .box::before {
  48.             content: "小艾同学";
  49.             background-color: #f34;
  50.             /* 第二步，将这个盒子向外移动高度的一半 */
  51.             /* 原因是立方体旋转的轴是中心点，要让这两个盒子中心点一样 */
  52.             z-index: 1;
  53.             transform: translateZ(17.5px);
  54.         }
  56.         .box::after {
  57.             content: "要加油鸭~";
  58.             background-color: #09f;
  59.             /* 第一步：先让盒子向下移动高度的一半，再向前翻转90度 */
  60.             /* 位移写前面 */
  61.             transform: translateY(17.5px) rotateX(-90deg);
  62.         }
  63.     </style>
  64. </head>
  66. <body>
  67.     <ul>
  68.         <li>
  69.             <div class="box"></div>
  70.         </li>
  71.         <li>
  72.             <div class="box"></div>
  73.         </li>
  74.         <li>
  75.             <div class="box"></div>
  76.         </li>
  77.         <li>
  78.             <div class="box"></div>
  79.         </li>
  80.         <li>
  81.             <div class="box"></div>
  82.         </li>
  83.         <li>
  84.             <div class="box"></div>
  85.         </li>
  86.         <li>
  87.             <div class="box"></div>
  88.         </li>
  89.     </ul>
  90. </body>
  92. </html>

7.3 旋转相册

图片上传不了，可将案例中的图片任意替换

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         body {
  15.             /* 透视 */
  16.             perspective: 1000px;
  17.         }
  19.         section {
  20.             position: relative;
  21.             width: 300px;
  22.             height: 200px;
  23.             margin: 200px auto;
  24.             /* 使子元素保留三维立体空间 */
  25.             transform-style: preserve-3d;
  26.             /* 匀速循环播放10s */
  27.             animation: rotate 10s linear infinite;
  28.         }
  30.         @keyframes rotate {
  31.             0% {
  32.                 transform: rotateY(0deg);
  33.             }
  35.             100% {
  36.                 transform: rotateY(360deg);
  37.             }
  38.         }
  40.         section div {
  41.             position: absolute;
  42.             top: 0;
  43.             left: 0;
  44.             width: 100%;
  45.             height: 100%;
  46.             background: url(images/xi.gif) no-repeat;
  47.             background-size: 300px;
  48.         }
  50.         section div:first-child {
  51.             /* 向外300 */
  52.             transform: translateZ(300px);
  53.         }
  55.         section div:nth-child(2) {
  56.             /* 先沿着y轴右内转60度，在向外移动300 */
  57.             /* 此时要先写旋转再写移动 */
  58.             transform: rotateY(60deg) translateZ(300px);
  59.         }
  61.         section div:nth-child(3) {
  62.             /* 先沿着y轴右内转120度，在向外移动300 */
  63.             transform: rotateY(120deg) translateZ(300px);
  64.         }
  66.         section div:nth-child(4) {
  67.             /* 先沿着y轴右内转180度，在向外移动300 */
  68.             transform: rotateY(180deg) translateZ(300px);
  69.         }
  71.         section div:nth-child(5) {
  72.             /* 先沿着y轴右内转180度，在向外移动300 */
  73.             transform: rotateY(240deg) translateZ(300px);
  74.         }
  76.         section div:nth-child(6) {
  77.             /* 先沿着y轴右内转180度，在向外移动300 */
  78.             transform: rotateY(300deg) translateZ(300px);
  79.         }
  80.     </style>
  81. </head>
  83. <body>
  84.     <section>
  85.         <div></div>
  86.         <div></div>
  87.         <div></div>
  88.         <div></div>
  89.         <div></div>
  90.         <div></div>
  91.     </section>
  92. </body>
  94. </html>

7.4 立方体

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         .box {
  15.             position: relative;
  16.             width: 200px;
  17.             height: 200px;
  18.             margin: 100px auto;
  19.             transform-style: preserve-3d;
  20.             transition: all 5s;
  21.         }
  23.         div[class ^=content] {
  24.             position: absolute;
  25.             top: 0;
  26.             left: 0;
  27.             width: 100%;
  28.             height: 100%;
  29.             text-align: center;
  30.             line-height: 200px;
  31.             opacity: .5;
  32.         }
  34.         /* 前 */
  35.         .content1 {
  36.             /* 向外移动一半 */
  37.             transform: translateZ(100px);
  38.             background-color: #90f;
  39.         }
  41.         /* 后 */
  42.         .content2 {
  43.             /* 向里移动一半 */
  44.             transform: translateZ(-100px);
  45.             background-color: #99a;
  46.         }
  48.         /* 左 */
  49.         .content3 {
  50.             /* 先旋转90度，再向左移动一半 */
  51.             transform: rotateY(90deg) translateZ(-100px);
  52.             background-color: #09f;
  53.         }
  55.         /* 右 */
  56.         .content4 {
  57.             /* 先旋转90度，再向右移动一半 */
  58.             transform: rotateY(90deg) translateZ(100px);
  59.             background-color: #f34;
  60.         }
  62.         /* 上 */
  63.         .content5 {
  64.             /* 先沿x轴旋转180度，在向上移动一半 */
  65.             transform: rotateX(90deg) translateZ(-100px);
  66.             background-color: #f99;
  67.         }
  69.         /* 下 */
  70.         .content6 {
  71.             /* 先沿x轴旋转180度，在向下移动一半 */
  72.             transform: rotateX(90deg) translateZ(100px);
  73.             background-color: green;
  74.         }
  76.         .box:hover {
  77.             transform: rotate3d(1, 1, 1, 360deg);
  78.         }
  79.     </style>
  80. </head>
  82. <body>
  83.     <div class="box">
  84.         <div class="content1">前</div>
  85.         <div class="content2">后</div>
  86.         <div class="content3">左</div>
  87.         <div class="content4">右</div>
  88.         <div class="content5">上</div>
  89.         <div class="content6">下</div>
  90.     </div>
  91. </body>
  93. </html>

7.5 相册

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         body {
  15.             perspective: 1000px;
  16.         }
  18.         ul {
  19.             position: relative;
  20.             width: 300px;
  21.             height: 400px;
  22.             margin: 200px auto;
  23.             /* 旋转中线点在底部 */
  24.             transform-origin: bottom;
  25.             transition: transform .5s;
  26.             /* 开启3d状态 */
  27.             transform-style: preserve-3d;
  28.         }
  30.         ul:hover {
  31.             transform: rotateX(30deg);
  32.         }
  34.         ul li {
  35.             position: absolute;
  36.             top: 0;
  37.             left: 0;
  38.             list-style: none;
  39.             width: 100%;
  40.             height: 100%;
  41.         }
  43.         ul li img {
  44.             width: 100%;
  45.             height: 100%;
  46.             border: 5px solid #09f;
  47.             border-radius: 10px;
  48.             transform-origin: left;
  49.             /* 匀速过渡1s */
  50.             transition: transform linear 1s
  51.         }
  53.         ul:hover li:nth-child(5) img {
  54.             /* 给每一张图片设置延迟 */
  55.             transition-delay: .5s;
  56.             transform: rotateY(-180deg);
  57.         }
  59.         ul:hover li:nth-child(4) img {
  60.             transition-delay: 1s;
  61.             transform: rotateY(-150deg);
  62.         }
  64.         ul:hover li:nth-child(3) img {
  65.             transition-delay: 1.5s;
  66.             transform: rotateY(-120deg);
  67.         }
  69.         ul:hover li:nth-child(2) img {
  70.             transition-delay: 2s;
  71.             transform: rotateY(-50deg);
  72.         }
  74.         ul li:nth-child(1) img {
  75.             transform: rotateY(0deg);
  76.         }
  77.     </style>
  78. </head>
  80. <body>
  81.     <ul>
  82.         <li><img src="./images/01.jpg" alt=""></li>
  83.         <li><img src="./images/02.jpg" alt=""></li>
  84.         <li><img src="./images/03.jpg" alt=""></li>
  85.         <li><img src="./images/04.jpg" alt=""></li>
  86.         <li><img src="./images/05.jpg" alt=""></li>
  87.     </ul>
  88. </body>
  90. </html>

分享结束！有不足之处敬请批评指正！

03-css3中的3D转换的更多相关文章

  1. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  2. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  3. CSS3 2D、3D转换

    2D转换方法:transform().rotate().scale().skew().matrix() 3D转换方法:rotateX().rotateY() 1.示例代码 <!DOCTYPE h ...

  4. CSS3中的2D转换

    通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 转换是使元素改变形状.尺寸和位置的一种效果. 注:Internet Explorer 10.Firefox 以及 Opera 支 ...

  5. css3中做3D导航栏

    看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...

  6. css3 中的2D转换

    一.CSS3转换 通过转换实现对对元素进行旋转.缩放.移动.拉伸的效果:这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成. 2D转换采用transform属性来实现效果 ...

  7. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  8. CSS3 3D转换——rotateX()，rotateY()，rotateZ()

    CSS3 允许使用 3D 转换来对元素进行格式化. ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webk ...

  9. CSS3带你实现3D转换效果

    前言 在css3中允许使用3D转换来对元素进行格式化,在原本只是2D转化的平面中引入了Z轴.在这之前我们讲解了css3中的2D转换,也就是二维空间变换,本篇的3D转换就是基于原来的2D转换而来,与2D ...

随机推荐

  1. Spring框架——继承 - 依赖 - 命名空间

    Spring 继承 子 bean 可以继承⽗ bean 的属性值. <bean id="user" class="com.sunjian.entity.User&q ...

  2. shell编程之循环语句

    for #! /bin/sh for FRUIT in apple banana pear; do echo "I like $FRUIT" done while #! /bin/ ...

  3. hackerone或PayPal转账到国内银行卡

    1.首先hackerone会提示有W9那么一说,这个是美国人纳税的,我们是中国人不需要纳税的,只要给美国税务局发邮件说你是中国人不需要纳税就OK了.具体操作百度. 2.如此就会成功转账到你的PayPa ...

  4. 动态规划-LCS-Uncrossed Lines

    2020-02-11 21:14:18 问题描述: 问题求解: 本质就是LCS. public int maxUncrossedLines(int[] A, int[] B) { int len1 = ...

  5. RDD的Cache、Persist、Checkpoint的区别和StorageLevel存储级别划分

    为了增强容错性和高可用,避免上游RDD被重复计算的大量时间开销,Spark RDD设计了包含多种存储级别的缓存和持久化机制,主要有三个概念:Cache.Persist.Checkout. 1.存储级别 ...

  6. 你所不知道的 C# 中的细节

    前言 有一个东西叫做鸭子类型,所谓鸭子类型就是,只要一个东西表现得像鸭子那么就能推出这玩意就是鸭子. C# 里面其实也暗藏了很多类似鸭子类型的东西,但是很多开发者并不知道,因此也就没法好好利用这些东西 ...

  7. Mysql获取系统时间，年，月，日

      Mysql数据库中获取系统时间,年,月,日单个获取 获取当前系统日期时间:select SYSDATE() AS 系统日期时间; 获取当前系统年月日:select current_date AS ...

  8. java 环境变量配置与第一个程序运行

    从开始下载jdk,到运行出java第一个程序 ,花了5天时间 ,不过我相信万事开头难 ,以后会越来越好的 ,加油! jdk的下载: 在oracle官网上即可下载,jdk安装包,下载完以后运行安装 ,路 ...

  9. Python python 五种数据类型--字符串

    # python 字符串的初始化 var1 = 'hello,world' # python 字符串为不可变类型 var2= var1* 2 print(var1) #hello,world prin ...

  10. Spring装配Bean的三种方式+导入和混合配置

    目录 Spring IoC与bean 基于XML的显式装配 xml配置的基本结构 bean实例的三种创建方式 依赖注入的两种方式 构造器注入方式 setter方法注入方式 利用命名空间简化xml 基于 ...