搜索
首页web前端html教程怎样用CSS做出3D效果的云_html/css_WEB-ITnose

介绍

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

静态效果图

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

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

1.新建一个世界和视角

首先,我们需要两个div元素: viewport 和 world。剩下的部分将会在后面动态的加入。

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

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

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

<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变换来替代 left 和 top, 他们默认会出现在 world 的中央位置。width 和 height属性无关紧要,因为这些新的容器是放置那些真实云的层。如果正式应用里最好将他们居中(通过设置 margin-left 和 margin-top 属性 来设置 width 和 height 一半的负数值)。

.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[] 来为世界里每一个单独的云层建立一个引用。我们用 worldXangle 和 worldYAngle 来表示整个空间的选择变换。

如果我们将每个层都设置成相反的旋转,这会在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 和其他云基体还是三维空间里的对象。

点我来见证神奇的效果

最后总结

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

点我看看最后的效果

点我看看最后版本

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

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

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

本文译自 https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d#涉及到一些3D透视等专业词汇翻译有误敬请见谅,欢迎指正。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!