jQuery技术

CSS3 3D transforms系列教程-立方体

字号+ 作者:H5之家 来源:H5之家 2017-02-20 14:04 我要评论( )

学习制作3D翻转卡片是开始学习3D transform的一个好方法。一旦你掌握了3D翻转卡片的制作方法,是不是迫不及待的想制作更复杂的3D物体?我们在这个教程中将开始学

学习制作3D翻转卡片是开始学习3D transform的一个好方法。一旦你掌握了3D翻转卡片的制作方法,是不是迫不及待的想制作更复杂的3D物体?我们在这个教程中将开始学习制作3D立方体。

3D立方体的HTML结构和3D卡片的HTML结构一样简单,它需要6个元素来制作立方体的6个面:

<section> <div> <figure>1</figure> <figure>2</figure> <figure>3</figure> <figure>4</figure> <figure>5</figure> <figure>6</figure> </div> </section>

给立方体的六个面设置基本的定位方式和尺寸:

.container { width: 200px; height: 200px; position: relative; perspective: 1000px; } #cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } #cube figure { width: 196px; height: 196px; display: block; position: absolute; border: 2px solid black; }

在制作3D卡片的时候,我们只需要旋转它的背面,对于3D立方体,我们需要旋转6个面中的5个。面1和免 是前后两个面,面3和免4是左右两侧的面,面5和免6是上下两个main。

#cube .front { transform: rotateY( 0deg ); } #cube .back { transform: rotateX( 180deg ); } #cube .right { transform: rotateY( 90deg ); } #cube .left { transform: rotateY( -90deg ); } #cube .top { transform: rotateX( 90deg ); } #cube .bottom { transform: rotateX( -90deg ); }

我们可以移除#cube .front的声明,因为它没有效果。我们将它留在代码中是为了代码更加清晰。

现在,立方体所有的面都被旋转了,只有前面可以看得见。有4个面是和观察者垂直的,所以我们看不见它们。为了将它们放置到合适的位置,我们需要转化它们的中心位置。立方体的每一个面都是200像素宽,将中心点转化到立方体的中心需要移动一半宽度的距离:100像素。

#cube .front { transform: rotateY( 0deg ) translateZ( 100px ); } #cube .back { transform: rotateX( 180deg ) translateZ( 100px ); } #cube .right { transform: rotateY( 90deg ) translateZ( 100px ); } #cube .left { transform: rotateY( -90deg ) translateZ( 100px ); } #cube .top { transform: rotateX( 90deg ) translateZ( 100px ); } #cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }

注意:这里translateZ的定义在rotate之后,transform 的顺序是很重要的。你需要花一些时间研究一下这些代码。每一个面开始时都按自己的中心点旋转,然后它们的中心点分别单独的倍向外转化。

现在,我们制作好了一个立方体,但是工作还没有完成。

重返Z轴平面

对于用户体验而言,当立方体的一个面到达新的位置的时候,我们的3D transforms不能将面于面之间的接口扭曲,但是当我们将元素推出Z轴平面的时候,扭曲是不可避免的。

为了保证3D transforms的平滑,Safari 浏览器将元素进行合成然后在应用transform。因此,不管是否应用了transform,文本的抗锯齿效果依然存在。然而,当在3d空间中进行transform时,文本将会被像素化。

文本像素化效果

查看文本像素化效果

回头看看Perspective的第3个DEMO,注意不管 perspective 的值多小,第一个面总是会回到它原来的位置。

要解决这个失真问题,我们可以将3D对象往回推,这样最前方的面将被定位在Z平面的后方。

#cube { transform: translateZ( -100px ); }

立方体

查看立方体效果-1

要展示立方体的所有的面,我们需要一个样式来旋转立方体,以使六个面都被展示。我们只需要在相应的面上执行相反的transform。然后就可以在#box上切换相应的class来展示相应的面。

#cube.show-front { transform: translateZ( -100px ) rotateY( 0deg ); } #cube.show-back { transform: translateZ( -100px ) rotateX( -180deg ); } #cube.show-right { transform: translateZ( -100px ) rotateY( -90deg ); } #cube.show-left { transform: translateZ( -100px ) rotateY( 90deg ); } #cube.show-top { transform: translateZ( -100px ) rotateX( -90deg ); } #cube.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); }

注意上面的代码中transform是如何执行反向操作的。先分别用translateZ转换中心点,然后再分别旋转各个面。

最后可以添加一个transition来过渡一下立方体的旋转动画。

立方体

查看立方体效果-2

相关3D立方体立方体效果:纯CSS3超酷3D旋转立方体动画特效

CSS3 3D transforms系列教程:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Web前端面试题:什么是jQuery EasyUI?

    Web前端面试题:什么是jQuery EasyUI?

    2017-02-11 16:00

  • content水平居中

    content水平居中

    2017-02-09 13:01

  • jQuery学习笔记之jQuery+CSS3的浏览器兼容性

    jQuery学习笔记之jQuery+CSS3的浏览器兼容性

    2017-02-05 09:04

  • jquery+css实现信箱自动补全

    jquery+css实现信箱自动补全

    2016-11-21 18:02

网友点评