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

相关文章

来自专栏数据派THU

独家 | 10分钟带你上手TensorFlow实践(附代码)

原文标题:TensorFlow Tutorial: 10 minutes Practical TensorFlow lesson for quick learn...

3237
来自专栏小樱的经验随笔

1082 与7无关的数(思维题,巨坑)

1082 与7无关的数 题目来源:                 有道难题 基准时间限制:1 秒 空间限制:131072 KB 分值: 5        ...

3217
来自专栏丁科的专栏

Pytorch 学习笔记之自定义 Module

pytorch 是一个基于 python 的深度学习库。pytorch 源码库的抽象层次少,结构清晰,代码量适中。相比于非常工程化的 tensorflow,py...

3.2K1
来自专栏数据结构与算法

P2280 [HNOI2003]激光炸弹

题目描述 ? 输入输出格式 输入格式: 输入文件名为input.txt 输入文件的第一行为正整数n和正整数R,接下来的n行每行有3个正整数,分别表示 输...

2695
来自专栏数据处理

mat(矩阵)与array(数组)区别

1393
来自专栏智能算法

深度学习三人行(第2期)---- TensorFlow爱之再体验

上一期,我们一起学习了TensorFlow的基础知识,以及其在线性回归上的初体验,该期我们继续学习TensorFlow方面的相关知识。学习的路上,我们多多交流,...

32610
来自专栏前端儿

大小写互换

  现在给出了一个只包含大小写字母的字符串,不含空格和换行,要求把其中的大写换成小写,小写换成大写,然后输出互换后的字符串。

792
来自专栏ascii0x03的安全笔记

使用sklearn构建含有标量属性的决策树

网络上使用sklearn生成决策树的资料很多,这里主要说明遇见标量数据的处理。 经查验参考资料,sklearn并非使用了课上以及书上讲的ID3算法,而是选择了C...

3246
来自专栏数据结构与算法

P1888 三角函数

题目描述 输入一组勾股数a,b,c(a≠b≠c),用分数格式输出其较小锐角的正弦值。(要求约分。) 输入输出格式 输入格式: 一行,包含三个数,即勾股数...

2637
来自专栏数据小魔方

Excel单元格内容合并的技巧!!!

今天给大家分享单元格内容合并的技巧! ▽ 之前推送过一篇单元格数据分裂的技巧,很多同学都私信我说很实用,并且希望以后能够多写一些这种可以瞬间提升工作效率的小技巧...

2657

扫码关注云+社区