用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 条评论
登录 后参与评论

相关文章

来自专栏程序员宝库

Chrome 浏览器必知必会的小技巧

来源:FEWY https://segmentfault.com/a/1190000012143176 说明 这篇文章主要介绍的就是一些chrome浏览器的小技...

4718
来自专栏前端小叙

小程序渲染html的两种方法

一、使用文档自带的原生API  rich-text, nodes属性直接绑定需要渲染的html内容即可,文档参见这里:https://developers.we...

1204
来自专栏性能与架构

微信小程序示例 - 表单

滚动选择器 picker ? 代码结构 // wxml <picker bindchange="bindChange" value="{{index}}" ra...

4847
来自专栏KaliArch

搭建高可用MongoDB集群(Replica set)

MongoDB基础可参考http://blog.51cto.com/kaliarch/2044423

1.1K10
来自专栏扎心了老铁

JavaScript实现模糊推荐的input框(类似搜索框)

如何用JS实现一个类似搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: ? 实现很简单,但是易用性会上升一大截,需要用到的有jquery-...

4339
来自专栏无原型不设计

在 Mockplus 设置页面链接,实现页面交互

在Mockplus中,可以轻松设置页面链接,方法有二:   一、直接拖拽 1 点击某个组件,此时组件上方出现小工具栏。 2 拖拽(点击后不放手)小工具栏...

2827
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

703
来自专栏Angular&服务

Angular2 组件的使用

3.在 @Component 中 ,设置selector、template 和 styles 等元数据

1293
来自专栏小白课代表

有了它,放大100倍不是梦

②选择好文件以后点击开始,放大的图片大小需要<10M,尺寸需要<3000×3000PX。

541
来自专栏娱乐心理测试

ios上传appStore所需图片各种尺寸

主要尺寸为(以像素为单位):40 , 60 ,58,87,80,120,180,app store上显示的icon图标尺寸:1024

1113

扫码关注云+社区