亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > CSS3制作3D页面

    CSS3制作3D页面

    时间：2023-09-11 17:36:02 | 来源：网站运营

    时间：2023-09-11 17:36:02 来源：网站运营

    CSS3制作3D页面：CSS3新增了几个有关3D转换属性，本文主要介绍下CSS3的一些属性变换，以及一些酷炫的3D动效如何实现.

    详细转换内容 ：

    ①translateX : 延X轴移动n个单位（ em rem px %<%为变换元素宽度的百分比> ···）

    ②translateY : 延Y轴移动n个单位（ em rem px %<%为变换元素宽度的百分比> ···）

    ③translateZ : 延Z轴移动n个单位（ em rem px <该方向的值不可为%> ···）

    ①②合并属性为2D，其属性值为 translate（X , Y）

    ①②③合并属性为3D，其属性值为 translate3D（X , Y，Z）

    ④scaleX: 延X轴放大n倍

    ⑤scaleY: 延Y轴放大n倍

    ⑥scaleZ: 延Z轴放大n倍

    ④⑤合并属性为2D，其属性值为 scale（X , Y）

    ④⑤⑥合并属性为2D，其属性值为 scale3D（X , Y, Z）

    ⑦rotateX: 延X轴逆时针旋转n°

    ⑧rotateY: 延Y轴逆时针旋转n°

    ⑨rotateZ: 延Z轴逆时针旋转n°

    ⑦⑧合并属性为2D，其属性值为 rotate（X , Y）

    ⑦⑧⑨合并属性为2D，其属性值为 rotate3D（X , Y, Z）

    ⑪skewX: 定义沿着 X 轴的 2D 倾斜转换。skewX(x-angle)

    ⑫skewY:定义沿着 Y 轴的 2D 倾斜转换。skewY(y-angle)

    ⑬skew:定义沿着 X 和 Y 轴的 2D 倾斜转换。skew (x-angle,y-angle)

    ⑭matrix: 定义 2D 转换，使用六个值的矩阵。参考2D矩阵转换篇

    ⑮matrix3d：定义 3D 转换，使用 16 个值的 4x4 矩阵。参考3D矩阵转换篇

    根据3D的坐标视图解释对应的坐标轴X对应浏览器左右移动，Y对应浏览器上下移动，Z则是眼睛和浏览器连成的模拟线，Z越大视觉效果上浏览器中的元素越来越远。

    3D坐标图解












    1· 首先我们要准备一个div容器去存放一个正方体,设置好视角，视距，开启子元素3D转换功能，然后将正方行的6个面全部叠在一坨。代码如下：

    index.html

    <!DOCTYPE html><html> <head> <meta charset=utf-8> <title>正方体拆解</title> <link rel="stylesheet" href="./box.csss" type="text/css"> </head> <body> <div class="container-box"> <div class="box-front">前面</div> <div class="box-after">后面</div> <div class="box-left">左面</div> <div class="box-right">右面</div> <div class="box-up">上面</div> <div class="box-down">下面</div> </div> </body></html>box.css

    .container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; background-color: #edf9fa;}.container-box > div{ position:absolute; left: 200px; top: 200px; width:200px; height:200px; line-height:200px; text-align:center; }.container-box > .box-front{ background-color:#fffeee}.container-box > .box-after{ background-color:#92ffc8}.container-box > .box-left{ background-color:#0316ff}.container-box > .box-right{ background-color:#03dbff}.container-box > .box-up{ background-color:#ffbe03}.container-box > .box-down{ background-color:#ff3e03}
    第一步视觉效果，淡蓝色为容器，红色为最后一个面，其他面均在其下方
    2·将前面向前推动200px；后面向前推到0px

    box.css

    .container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; background-color: #edf9fa;}.container-box > div{ position:absolute; left: 200px; top: 200px; width:200px; height:200px; line-height:200px; text-align:center; }.container-box > .box-front{ background-color:#fffeee; transform: translateZ(200px);}.container-box > .box-after{ background-color:#92ffc8; transform: translateZ(0);}.container-box > .box-left{ background-color:#0316ff}.container-box > .box-right{ background-color:#03dbff}.container-box > .box-up{ background-color:#ffbe03}.container-box > .box-down{ background-color:#ff3e03}
    第二步视觉效果，淡蓝色为容器，淡黄色为前面，其他面在这个面之下
    3· 前后面动刀后，我们动刀左右面.左面向左移动100px,并向前移动100px，然后以默认中心点延Y轴转动-90°；右面向右移动100px,并向前移动100px，然后以默认中心点延Y轴转动90°。千万不要晕啊，需要一点点3D思维，大家可以拿个正方体想象一下。

    .container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; background-color: #edf9fa;}.container-box > div{ position:absolute; left: 200px; top: 200px; width:200px; height:200px; line-height:200px; text-align:center; }.container-box > .box-front{ background-color:#fffeee; transform: translateZ(200px);}.container-box > .box-after{ background-color:#92ffc8; transform: translateZ(0);}.container-box > .box-left{ background-color:#0316ff; transform: translateX(-100px) translateZ(100px) rotateY(-90deg); }.container-box > .box-right{ background-color:#03dbff; transform: translateX(100px) translateZ(100px) rotateY(90deg);}.container-box > .box-up{ background-color:#ffbe03;}.container-box > .box-down{ background-color:#ff3e03;}
    第三步：效果图咋看没变化，实则不是，想象一下我们从正方体正面正中心看过去是不是除了正面我们什么也看不见，这时候我们就要旋转下正方体了来看达到效果
    4· 将正方体的容器延X轴，Y轴旋转30°，添加一行css

    .container-box { transform: rotateX(30deg) rotateY(30deg);}.container-box > .box-up{ display:none;}.container-box > .box-down{ display:none;}
    转动，并隐藏上未处理的上下面 后的效果图
    5· 接下来我们只需要处理上下面就OK了，上面向上移动100px，向前移动100px，然后以默认中心点延X轴转动90°；下面向下移动100px，向前移动100px，然后以默认中心点延X轴转动-90°；

    box.css

    .container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; background-color: #edf9fa; transform: rotateX(30deg) rotateY(30deg);}.container-box > div{ position:absolute; left: 200px; top: 200px; width:200px; height:200px; line-height:200px; text-align:center; }.container-box > .box-front{ background-color:#fffeee; transform: translateZ(200px);}.container-box > .box-after{ background-color:#92ffc8; transform: translateZ(0);}.container-box > .box-left{ background-color:#0316ff; transform: translateX(-100px) translateZ(100px) rotateY(-90deg); }.container-box > .box-right{ background-color:#03dbff; transform: translateX(100px) translateZ(100px) rotateY(90deg);}.container-box > .box-up{ background-color:#ffbe03; transform: translateY(-100px) translateZ(100px) rotateX(90deg);}.container-box > .box-down{ background-color:#ff3e03; transform: translateY(100px) translateZ(100px) rotateX(-90deg);}
    最终我们完成后的页面效果，最后我们在添加上动画效果让正方体转动起来
    5. 添加requestAnimationFrame帧动画，使正方形以自身中心点旋转变换。(下面代码各位直接复制成静态HTML即可观察)

    index.html

    <!DOCTYPE html><html> <head> <meta charset=utf-8> <title>正方体拆解</title> <style> .container-box{ position:relative; width:600px; height: 600px; perspective: none; perspective-origin: center; transform-style: preserve-3d; transform-origin: center center 100px; } .container-box > div{ position:absolute; left: 50%; top: 50%; margin-left:-100px; margin-top:-100px; width:200px; height:200px; line-height:200px; text-align:center; } .container-box > .box-front{ background-color:#fffeee; transform: translateZ(200px); } .container-box > .box-after{ background-color:#92ffc8; transform: translateZ(0); } .container-box > .box-left{ background-color:#0316ff; transform: translateX(-100px) translateZ(100px) rotateY(-90deg); } .container-box > .box-right{ background-color:#03dbff; transform: translateX(100px) translateZ(100px) rotateY(90deg); } .container-box > .box-up{ background-color:#ffbe03; transform: translateY(-100px) translateZ(100px) rotateX(90deg); } .container-box > .box-down{ background-color:#ff3e03; transform: translateY(100px) translateZ(100px) rotateX(-90deg); } </style> </head> <body> <div class="container-box"> <div class="box-front">前面</div> <div class="box-after">后面</div> <div class="box-left">左面</div> <div class="box-right">右面</div> <div class="box-up">上面</div> <div class="box-down">下面</div> </div> <script> //闭包、也可以理解为自执行函数 (function(){ var animatEle = document.querySelector('div.container-box'); var x = 0, y = 0, z = 0; var animation = function(){ //定义动画 x += +(Math.random().toFixed(2)); y += +(Math.random().toFixed(2)); z += +(Math.random().toFixed(2)); debugger; animatEle.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`; requestAnimationFrame(animation) } requestAnimationFrame(animation);//启动帧动画 }()) </script> </body></html>
    帧动画效果
    帧动画写太多JS代码感觉并不是很理想，再次删除JavaScript代码，下篇幅具体分析CSS3动画，希望大家多多关注，后期也会继续更新博客

    关键词：

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭