CSS3D(一)

已于 2022-11-29 23:52:09 修改
阅读量185 收藏
点赞数
分类专栏： 前端可视化 文章标签： css3 css 前端
于 2022-11-29 22:39:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46738453/article/details/127951966
版权
本文介绍了CSS3的3D变换，包括坐标系理解、3D旋转、透视效果、平移、缩放、transform-style的应用，以及如何制作正方体和优化性能。重点讲解了webpack-logo案例中的3D立方体动画实现。
摘要由CSDN通过智能技术生成

文章目录

一、css3d

1、坐标系认识

  <style>
    body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* 形变 */
      /* 先位移后选旋转 和 先旋转 在位移他们的坐标系不一样 */
      /* transform: translate(200px) rotate(90deg); */
      /* transform: rotate(90deg) translate(100px); */
    }
  </style>

<div class="box">div</div>

形变1
形变2

2、修改坐标系原点

  • 默认坐标系的原点是元素的中间
    body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* transform-origin: bottom; */
      transform: rotate(90deg);
      /* 下边界的中点  bottom -> 50%, 100% */
      /* transform-origin: bottom; */

      /* 左边界的中点  left -> 0, 50% */
      transform-origin: left;
    }

二、3D动画

2.1 3D旋转 rotate

在这里插入图片描述

    body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* 形变 */
      /* transform: rotateZ(45deg); */


      /* 简写 */
      /* transform: rotate(45deg); */
      /* transform: rotate3d(0, 0, 1, 45deg); */
      transform: translate(200px, 100px) rotate3d(1, 0, 0, 45deg);
    }

在这里插入图片描述

    body{
      margin: 0;
      padding: 100px;
      background-image: url(../images/grid.png);
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: skyblue;

      /* 形变 */
      transform: rotateX(-33.5deg) rotateY(45deg);
    }

在这里插入图片描述

2.2 透视

在这里插入图片描述

2.1 使用方式①在父元素上定义 CSS 透视属性

body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box {
      position: relative;
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* 在父元素添加透视效果 */
      perspective: 200px;
    }

    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;
      /* 形变 */
      /* 必须是3d的才会发生透视 */
      transform: rotateY(60deg);
    }

 <div class="box">div
    <div class="item">10</div>
  </div>

在这里插入图片描述

2.2 方法②如果它是子元素或单元素子元素，可以使用函数 perspective()

    body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box {
      position: relative;
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* 在当前元素中直接添加透视效果 */
      transform: translate(200px, 100px) perspective(200px) rotateX(45deg)
    }

 <div class="box">div</div>

在这里插入图片描述

2. 3D平移

    body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* 形变 */
      /* 可以看称第一个参数为眼睛距离物体的距离，第二个为物体距离眼睛的距离，当第二个数值超过或者等于第二个则是看不到的 */
      transform: perspective(300px) translate3d(200px, 100px, 200px);

    }

在这里插入图片描述

2.4 3D缩放

    body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box {
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* 形变 */
      transform: scaleX(2) scaleY(2);
      /* 简写 */
      transform: scale3d(2, 2, 1);
      transform-origin: 0 0;
    }

在这里插入图片描述

2.5 3D空间 - transform-style

在这里插入图片描述

body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box {
      position: relative;
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* 在父元素中添加 transform-style来启用3D空间 */
      transform-style: preserve-3d;
      /* 在父元素添加透视效果 */
      perspective: 300px;

    }

    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;

      /* 形变 */
      transform: rotateX(70deg) translateX(50px);
    }

 <div class="box">div
    <div class="item">10</div>
  </div>

在这里插入图片描述

2.6 3D空间 - 制作正方体

 body{
      margin: 0;
      padding: 100px;
      background-image: url(../images/grid.png);
    }
    .box{
      position: relative;
      width: 100px;
      height: 100px;
      background-color: red;
      
      /* 在父元素中添加 transform-style来启用3D空间 */
      transform-style: preserve-3d;
      transform: rotateX(-33.5deg) rotateY(45deg) scaleZ(2);
    }

    .item{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
     .top{
      background-color: rgba(255, 0, 0, 0.4);
      transform: rotateX(90deg) translateZ(50px);
    } 
    .bottom{
      background-color: rgba(0, 255, 0, 0.4);
      transform: rotateX(-90deg) translateZ(50px);
    } 
    
    .front{
      background-color: rgba(100, 100, 100, 0.4);
      transform: rotateY(0deg) translateZ(50px);
    } 
    
    .back{
      background-color: rgba(0, 255, 255, 0.4);
      transform: rotateY(-180deg) translateZ(50px);
    }  

    .left{
      background-color: rgba(255, 255, 0, 0.4);
      transform: rotateY(-90deg) translateZ(50px);
    } 
    .right{
      background-color: rgba(0, 0, 255, 0.4);
      transform: rotateY(90deg) translateZ(50px);
    } 


  <!-- 父元素(舞台) -->
  <div class="box">div
    <!-- 子元素 -->
    <div class="item top">1</div>
    <div class="item bottom">2</div>
    <div class="item front">3</div>
    <div class="item back">4</div>
    <div class="item left">5</div>
    <div class="item right">6</div>
  </div>

在这里插入图片描述

2.7 背部不可见

    body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box {
      position: relative;
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* 在父元素添加透视效果 */
      perspective: 800px;
    }

    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;
      /* 形变 */
      /* transform: rotateY(180deg); */

      /* 元素背向是否可见 */
      backface-visibility: hidden;

      /* 帧动画 */
      animation: loop 6s linear infinite;
    }

    @keyframes loop {
      0% {
        transform: rotateY(0deg);
      }

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


  <div class="box">div
    <div class="item">10</div>
  </div>

在这里插入图片描述
当元素在背面的时候看不到
在这里插入图片描述

三、案例

3.1 webpack-logo

在这里插入图片描述

<body>
  <div class="webpack-logo">

    <ul class="cube-inner">
      <li class="top">1</li>
      <li class="bottom">2</li>
      <li class="left">3</li>
      <li class="right">4</li>
      <li class="front">5</li>
      <li class="back">6</li>
    </ul>

    <ul class="cube-outer">
      <li class="top">1</li>
      <li class="bottom">2</li>
      <li class="left">3</li>
      <li class="right">4</li>
      <li class="front">5</li>
      <li class="back">6</li>
    </ul>

  </div>
</body>

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #2b3a42;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.webpack-logo {
  width: 100%;
  height: 200px;
  position: relative;
}

.cube-inner {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 不用transform的原因是 */
  margin: -50px 0 0 -50px;
  /* background-color: #fff; */

  /* 开启3D效果 */
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
  animation: innerLoop 6s ease-in-out infinite;
}

@keyframes innerLoop {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg);
  }

  50%,
  100% {
    transform: rotateX(-33.5deg) rotateY(-45deg);
  }
}

.cube-inner li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  background-color: #175d96;
}

.cube-inner .top {
  transform: rotateX(90deg) translateZ(50px);
}

.cube-inner .bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

.cube-inner .left {
  transform: translateZ(50px);
}

.cube-inner .right {
  /* background-color: #fff; */
  transform: rotate(-180deg) translateZ(-50px);
}

.cube-inner .back {
  transform: rotateY(90deg) translateZ(50px);
  /* background-color: red; */
}

.cube-inner .front {
  transform: rotateY(-90deg) translateZ(50px);
  /* background-color: #fff; */
}

.cube-outer {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 不用transform的原因是 */
  margin: -100px 0 0 -100px;
  /* background-color: #fff; */

  /* 开启3D效果 */
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
  animation: outLoop 6s ease-in-out infinite;
}

@keyframes outLoop {
  0% {
    transform: rotateX(-33.5deg) rotateY(-45deg);
  }

  50%,
  100% {
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
}

.cube-outer li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  background-color: rgba(141, 214, 249, 0.5);
}

.cube-outer .top {
  transform: rotateX(90deg) translateZ(100px);
}

.cube-outer .bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.cube-outer .left {
  transform: translateZ(100px);
}

.cube-outer .right {
  /* background-color: #fff; */
  transform: rotate(-180deg) translateZ(-100px);
}

.cube-outer .back {
  transform: rotateY(90deg) translateZ(100px);
  /* background-color: red; */
}

.cube-outer .front {
  transform: rotateY(-90deg) translateZ(100px);
  /* background-color: #fff; */
}

四、性能优化

在这里插入图片描述

KIKIo_
关注
专栏目录
CSS 3D效果
weixin_68485297的博客
04-11 7619
一、动画效果 1、Transform属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。 2、animation动画属性 语法： animation：（ animation-name animation–duration animation-timing-functionanimation-delayanimation-iteration-count animat...
如何用css实现一个3D旋转照片墙
qq_53983648的博客
11-14 3629
关于入门级css实现3D照片墙效果案例
CSS3 3D 变换详解
热门推荐
起心动念皆是因，当下所受皆是果。
04-13 1万+
CSS3 立体 3D 变换
css实现3D旋转效果
richest_qi的博客
08-14 1798
css实现3D旋转效果
CSS 3D旋转效果
qq_53322582的博客
03-01 1830
俗称3D变换，指基于3D立体的角度来设置盒子。比如将盒子设置为立方体。3D的效果跟2D是一样的，有平移和旋转，不同点在于，2D只有x轴和y轴，3D会多一个z轴，用于表示立体。 3D的效果通过需要远距离观察才能看出立体效果，因为距离太近，我们只能看出平面的2D效果，这就需要在设置3D变换效果之前，需要先设置景深（一般来说景深设置在900px-1200px之间就可以）： perspective: 1200px; /* 在父元素中使用,设置景深 */ 我们还需要设置从屏幕的哪个点来观察屏幕内部的3d效果：
CSS系列之3D转换
老__L的博客
02-27 3010
本文主要介绍CSS的perspective、perspective-origin、transform-style属性。3D转换
css3D变换用法
qq_63447955的博客
11-10 1533
CSS3D变换是CSS3中引入的一种强大功能，它允许开发者在网页上创建三维空间中的动画和交互效果。通过CSS3D变换，你可以实现元素的3D位移、旋转、缩放和倾斜，从而创建出更加生动和立体的用户体验。与2D平面坐标系不同，3D空间坐标系包含X轴、Y轴和Z轴。X轴水平向右，Y轴垂直向下，Z轴垂直于屏幕（向屏幕内为负值，向屏幕外为正值）。/* 沿X轴平移50px，沿Y轴平移50px，沿Z轴平移100px */此外，为了产生透视效果，还需要设置景深，这可以通过。在这个例子中，我们创建了一个包含。
CSS 3D转换
2401_82561004的博客
10-08 1382
在 CSS 中，除了可以对页面中的元素进行外，您也可以对象元素进行3D转换（将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作）。与 2D 转换相同，3D转换同样不会影响周围的元素，而且可以与其它元素重叠。但是，变换后的元素任然会占用其默认位置（未变换前）的空间。
CSS 3D动画入门：给你的网页添加深度感
阿里渣渣java研发组-群主
08-29 930
CSS 3D动画是指通过CSS样式来创建具有三维效果的动画。这种动画使得网页元素可以在三维空间中旋转、翻转、缩放等，创造出更为生动和立体的用户体验。CSS 3D动画为网页设计带来了无限的创意可能，使得页面能够突破二维的限制，展现出更为立体和丰富的效果。通过对3D动画的合理应用，设计师可以为用户带来更为沉浸和独特的浏览体验。希望通过这篇文章，你能够掌握CSS 3D动画的基本知识，并在项目中大胆尝试使用这些技术。如果你对3D动画有更多的想法或问题，欢迎在评论区与我交流！
CSS实现3D翻转卡牌效果
宇珩的博客
06-13 1319
这是一个简单的翻牌效果，通过 HTML 和 CSS 实现。
html+css3D轮播图片
01-29
在本示例中，我们将探讨如何使用这两种技术创建一个3D轮播图片效果。3D轮播图是一种吸引用户注意力并展示多张图片的有效方式，常用于网站的首页或产品展示区域。 首先，我们需要在HTML中设置基本的结构。这通常包括...
hellworldcss3d:一个css3d生成的伪3d模型插件
05-10
第一次写自己的插件，主要功能是用css 3d的属性生成伪3d的模型。 之前从没接触过css 3d ，css做动画就是我的弱项，一直以为要玩3d就得用webGL之类的,直到后来看到淘宝造物节，被经验到了，花了2天时间去研究怎么写。...
CSS3D.js, 用于 Three.js的CSS 3D 渲染器.zip
09-18
CSS3D.js, 用于 Three.js的CSS 3D 渲染器 CSS3D.js由 Steven Wittens 用于 Three.js的CSS 3D 渲染器注意：这个库现在已经过时了，因为 Three.js 拥有自己的CSS 3D 呈现器插件，它集成在一个更清晰的样式中。...
纯CSS3炫酷3D菜单 菜单项3D旋转动画
04-16
解压密码：RJ4587 不久前，我们刚刚为大家分享过很多外观各异的CSS3菜单，很多都是...今天要介绍的也是一款基于纯CSS3的3D菜单，当我们将鼠标滑过菜单项时，菜单项就会实现3D的旋转动画，另外菜单项是垂直的显示的。
纯CSS3制作3D旋转球体
11-04
在本文中，我们将深入探讨如何使用纯CSS3技术来创建一个具有3D旋转效果的球体。CSS3作为现代Web设计的重要工具，提供了丰富的样式和动画功能，其中3D转换是其亮点之一。通过理解并应用这些特性，我们可以构建出极具...
【网页设计】HTML5 和 CSS3 提高
Akiiiira的博客
11-12 1567
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。对于红色，是因为先找到的光头强，其标签为 p，与声明的 div 不符合，即没有符合条件的，所以不会变红。HTML5 在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。
CSS3_过渡（八）
。
11-15 654
介绍CSS3过渡的属性及用法。
网页作业9
最新发布
小派蒙的博客
11-15 658
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>服务中心</title> <style> * { mar
css3的新特性有哪些？
m0_47408435的博客
11-15 482
【代码】css3的新特性有哪些？
使用CSS创建3D效果
3D效果的核心在于CSS3的`transform`属性，虽然在提供的代码片段中没有直接使用，但在实际的3D效果实现中，`transform`是不可或缺的一部分。它可以用于改变元素的大小、位置和形状，其中包括`rotateX()`, `rotateY()`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值