用css3简单的制作3d半透明立方体图片展示

以上是实图展示需要用到的主要元素: 1、perspective:定义 3D 元素距视图的距 2、transform:允许我们对元素进行旋转、缩放、移动或倾斜 3、transform-style:规定如何在 3D 空间中呈现被嵌套的元素 4、transition:定义过渡开始、完成的时间、速度和类型 简述:.cube代表一个正方体,.cube里面的每一个div分别表示正方体的一个面,要想每个面都有图片,即在每个div里分别加上一个img。正方体的制作很简单,只需要先让6个面处于同一位置,然后再绕不同的轴旋转一定的角度和平移一定距离即可。下面一起看实操:

div部分

css搭建舞台

css 六个面绕不同的轴旋转、平移组成正方体

下面是完整代码,以下代码中,之所以在.side中加position:absolute是为了让6个面处于同一位置 然后再从相同的点出发进行不同的旋转和平移

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

一个最基本的布局控件-panel

Silverlight做了两个布局的控件了。 Silverlight控件 - Carrousel Silverlight控件 - ScatterView 所...

2765
来自专栏超然的博客

css 定位

正常文档流模式下,后面的dom元素覆盖前面的,如果将前面的元素设置了relative将提升它自身的层级

1061
来自专栏DeveWork

jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)

某年某月,Jeff在极客公园游览时,看见了其右下角的“返回顶部”效果。点一下,小火箭呼啦就上去了。我是那个喜欢啊,马上右键“审查元素”,希望能将源代码扒出来运用...

1878
来自专栏我和未来有约会

[Silverlight 4 RC]WebBrowser概览

WebBrowser控件提供了当silverlight应用运行在OOB(out of browser)模式时,在silverlight内部呈现html的功能。 ...

1769
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

4189
来自专栏三流程序员的挣扎

Android 动画总结(1) - 概述

Android 动画中的方方面面总结,只求全不求精与深。文中代码是 Java 和 Kotlin 混合。

1052
来自专栏Sorrower的专栏

界面无小事(九): 做个好看的伸缩头部

722
来自专栏小红豆的数据分析

小蛇学python(10)tkinter和pandas的补充

本文主要是想对写界面以及操作表格遇到的常见问题做个总结。前两篇文章想想对tkinter和pandas这两个库的概述还不够全面。

1273
来自专栏一“技”之长

Java开发GUI之绝对布局 原

    前面多篇博客介绍了Java的awt包中的布局管理类,当然也可以不使用任何布局管理类,开发者可以直接设置组件的坐标和尺寸,示例代码如下:

792
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

2795

扫码关注云+社区