怎样用 CSS 做出 3D 效果的云

本贴最后更新于 2913 天前,其中的信息可能已经时异事殊

##介绍##

本文将介绍如何一步一步制作出一些 3D 效果的云彩,会用到一些高级的属性,主要是如何通过 CSS 的 3D 变换效果来实现,如果你想了解更多,这地方是个不错的开始

静态效果图

本教程将会分成几个部分,每一部分都会有详细的步骤让你理解 HTML,CSS 和 Javascript 都是如何工作的,每一步都有衔接,以及一个链接来测试单个部分的代码效果。教程里的代码是最终 demo 的简化版,但是主要区别在每一部分都有说明

  • 1.新建一个世界和视角
  • 2.向我们创建的世界里添加对象
  • 3.往我们的对象上添加层
  • 4.让 3D 效果运行起来
  • 5.最后总结

##1.新建一个世界和视角##
首先,我们需要两个 div 元素: viewportworld。剩下的部分将会在后面动态的加入。

viewport 包含了整一个屏幕和一个摄影机。由于在 CSS 3D 变换中没有摄影机本身,就假想你在通过一个透明的玻璃屏幕来看屏幕里的视野,你也可以改变看视野的方向。我们将会把所有对象都放在里面,然后对他们进行变换。

world 是一个用来固定所有对象的 div 盒子。 旋转,转化或者放大都变换都会改变我们的元素。为简单起见,我将在需要使用浏览器前缀(-webkit,-moz,-0,-ms 等等)的地方使用没有前缀的 CSS 属性

这就是我们需要的所有盒子模型:

<div id="viewport">
	<div id = "world" ></div>
</div>

下面是我们定义的两个 CSS 样式,这里非常重要的是要将 world div 放在 viewport div 里面,否则将无法渲染场景。要记住你将旋转一个放置在文档里的元素,像其他 2D 元素那样。

#viewport{
	bottom:0;
	left:0;
	overflow:hidden;
	perspective:400;
	position:absolute;
	right:0;
	top:0;
}

#world{
	height: 512px;
	left: 50%;
	margin-left: -256px;
	margin-top: -256px;
	position: absolute;
	top: 50%;
	transform-style: preserve-3d;
	width: 512px;
}

现在写一些代码来初始化我们的对象,绑定 mousemove 事件以及定义 updateView() 函数。

/*
	Defining our variables
	world and viewport are DOM elements,
	worldXAngle and worldYAngle are floats that hold the world rotations,
	d is an int that defines the distance of the world from the camera 
*/
var world = document.getElementById( 'world' ),
	viewport = document.getElementById( 'viewport' ),
	worldXAngle = 0,
	worldYAngle = 0,
	d = 0;

/*
	Event listener to transform mouse position into angles 
	from -180 to 180 degress, both vertically and horizontally
*/
window.addEventListener( 'mousemove', function( e ) {
	worldYAngle = -( .5 - ( e.clientX / window.innerWidth ) ) * 180;
	worldXAngle = ( .5 - ( e.clientY / window.innerHeight ) ) * 180;
	updateView();
} );

/*
	Changes the transform property of world to be
	translated in the Z axis by d pixels,
	rotated in the X axis by worldXAngle degrees and
	rotated in the Y axis by worldYAngle degrees.
*/
function updateView() {
	world.style.transform = 'translateZ( ' + d + 'px ) \
	rotateX( ' + worldXAngle + 'deg) \
	rotateY( ' + worldYAngle + 'deg)';
}

world 是红色的,viewport 有背景色来模拟天空,mousewheel 滚轮事件来监听摄影机的远近距离。移动鼠标来观察红色的 div 是如何改变方向的。

这是这一部分的演示链接

##2.向我们创建的世界里添加对象##

现在我们开始添加真正的 3D 内容。我们加入一些新的 div 放置在 world 空间里。有必要添加几个绝对位置的 div 作为 world 的子节点,但是用 3D 变换来替代 lefttop, 他们默认会出现在 world 的中央位置。widthheight 属性无关紧要,因为这些新的容器是放置那些真实云的层。如果正式应用里最好将他们居中(通过设置 margin-leftmargin-top 属性 来设置 widthheight 一半的负数值)。

.cloudBase {
	height: 20px;
	left: 256px;
	margin-left: -10px;
	margin-top: -10px;
	position: absolute;
	top: 256px;
	width: 20px;
}

我们添加 generate()createCloud() 方法来充实 world注意 random_{var} 不是真实的变量值,而是一个代码占位符,应该返回一个给定范围内的随机数

/*
	objects is an array of cloud bases
	layers is an array of cloud layers
*/
	var objects = [],
	layers = [];

/*
	Clears the DOM of previous clouds bases 
	and generates a new set of cloud bases
*/
	function generate() {
		objects = [];
		layers = [];
		if ( world.hasChildNodes() ) {
			while ( world.childNodes.length >= 1 ) {
				world.removeChild( world.firstChild );   
			} 
		}
		for( var j = 0; j <; 5; j++ ) {
			objects.push( createCloud() );
		}
	}

/*
	Creates a single cloud base: a div in world
	that is translated randomly into world space.
	Each axis goes from -256 to 256 pixels.
*/
	function createCloud() {
		var div = document.createElement( 'div'  );
		div.className = 'cloudBase';
		var t = 'translateX( ' + random_x + 'px ) \
		translateY( ' + random_y + 'px ) \
		translateZ( ' + random_z + 'px )';
		div.style.transform = t;
		world.appendChild( div );
		return div;
	}

页面中那些粉红色方块的层就是云层模型了,这里有一个 p 变量来更简单的改变 viewport.style.perspective 的值。试着去改变这个变量来观察我们的摄影机是如何变化的。这个值越大,视角的垂直度就会越大。再次提醒,那个 randowm_{var} 并不是真正的变量。

点我来观察这部分的演示

##3.往我们的对象上添加层##

现在有趣的事情开始发生了,我们添加了几个绝对位置的“云层” div 盒子来表示云,这些盒子将会用来装载云的贴图。

.cloudLayer {
	height: 256px;
	left: 50%;
	margin-left: -128px;
	margin-top: -128px;
	position: absolute;
	top: 50%;
	width: 256px;
}

旧的 createCloud() 函数做了一些改动,添加了云层的随机数。

/*
    Creates a single cloud base and adds several cloud layers.
    Each cloud layer has random position ( x, y, z ), rotation (a)
    and rotation speed (s). layers[] keeps track of those divs.
*/
function createCloud() {

    var div = document.createElement( 'div'  );
    div.className = 'cloudBase';
    var t = 'translateX( ' + random_x + 'px ) \
        translateY( ' + random_y + 'px ) \
        translateZ( ' + random_z + 'px )';
    div.style.transform = t;
    world.appendChild( div );
    
    for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
        var cloud = document.createElement( 'div' );
        cloud.className = 'cloudLayer';
        
        cloud.data = { 
            x: random_x,
            y: random_y,
            z: random_z,
            a: random_a,
            s: random_s
        };
        var t = 'translateX( ' + random_x + 'px ) \
            translateY( ' + random_y + 'px ) \
            translateZ( ' + random_z + 'px ) \
            rotateZ( ' + random_a + 'deg ) \
            scale( ' + random_s + ' )';
        cloud.style.transform = t;
        
        div.appendChild( cloud );
        layers.push( cloud );
    }
    
    return div;
}

点我来观察第三部分的演示

云层就是那些蓝色带有一点白色边边的部分,看起来相当有层次感呐。移动鼠标来观察下每一层的位置是怎样的以及如何旋转的。

##4.让 3D 效果运行起来##

接下来就是见证奇迹的时刻!我们用 layers[] 来为世界里每一个单独的云层建立一个引用。我们用 worldXangleworldYAngle 来表示整个空间的选择变换。

如果我们将每个层都设置成相反的旋转,这会在 viewport 里重新调整他们:我们就有一个布告板了。因为我们旋转 world 先是 X 方向然后是 Y 方向,我们需要反着顺序来旋转每一个层,首先是 Y 方向再是 X 方向,变换的顺序是非常重要的,如果你没有正确的设置顺序,元素的方向就都会不对了。

/*
    Iterate layers[], update the rotation and apply the
    inverse transformation currently applied to the world.
    Notice the order in which rotations are applied.
*/
function update (){
        
    for( var j = 0; j < layers.length; j++ ) {
        var layer = layers[ j ];
        layer.data.a += layer.data.speed;
        var t = 'translateX( ' + layer.data.x + 'px ) \
            translateY( ' + layer.data.y + 'px ) \
            translateZ( ' + layer.data.z + 'px ) \
            rotateY( ' + ( - worldYAngle ) + 'deg ) \
            rotateX( ' + ( - worldXAngle ) + 'deg ) \
            scale( ' + layer.data.s + ')';
        layer.style.transform = t;
    }
    
    requestAnimationFrame( update );
    
}

来回的移动鼠标,你将会看到蓝色的云层现在已经变成垂直的了(他们总是面对这镜头),但是 world 和其他云基体还是三维空间里的对象。

点我来见证神奇的效果

##5.最后总结##

为了达到最后的效果,只需要将用来调试的那些颜色去掉,吧云层 div 用一个 img 贴上云的图片。注意图片得是带有 alpha 通道的 PNG 格式,要不没效果。

点我看看最后的效果

点我看看最后版本

当然,你可以随意换其他你想要的图片:烟雾痕迹,等离子体云,绿叶,飞行的面包机等等。只要把 backgroud-image 更改下就好了。混合不同比例的纹理材质会有神奇的效果。

随机的添加元素是可以的,但是你也可以创建有序的结构,比如树,鸭子形状的云或者复杂的大爆炸等。可以尝试一些 3D 曲线,创建固定的云的运行轨迹,创造一个多人游戏来猜 3D 云的形状等等,充满着无限可能。

NOTE:文中的代码都是简化了的哦,如果想一步一步实际操作的话最好保存下示例效果的链接页面来查看源码。

本文译自 https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d#

涉及到一些 3D 透视等专业词汇翻译有误敬请见谅,欢迎指正。

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    180 引用 • 446 回帖 • 4 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • 翻译
    57 引用 • 83 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    66 引用 • 124 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    51 引用 • 190 回帖 • 1 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18150 引用 • 66977 回帖 • 1 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    169 引用 • 799 回帖
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 409 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 1 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    108 引用 • 54 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3165 引用 • 8206 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    126 引用 • 3621 回帖 • 1 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    131 引用 • 1114 回帖 • 152 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 98 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    85 引用 • 1192 回帖 • 461 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    9 引用 • 32 回帖 • 178 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 625 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 545 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    324 引用 • 1395 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 21 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    16 引用 • 53 回帖 • 104 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    21 引用 • 22 回帖 • 1 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    164 引用 • 407 回帖 • 524 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    83 引用 • 894 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    76 引用 • 390 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 688 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 21 关注