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

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

##介绍##

本文将介绍如何一步一步制作出一些 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 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 3 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 594 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖 • 58 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 8 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    228 引用 • 1450 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    284 引用 • 4481 回帖 • 651 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 22 关注
  • BND

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

    107 引用 • 1281 回帖 • 21 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 505 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 1 关注
  • GitLab

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

    46 引用 • 72 回帖 • 1 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 347 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    126 引用 • 1699 回帖
  • IBM

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

    16 引用 • 53 回帖 • 104 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 1 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 677 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 381 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 87 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    40 引用 • 40 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 9 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    308 引用 • 1658 回帖 • 1 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 247 回帖 • 211 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 597 回帖