CSS3构建一个正方体

                                    《专题技术文献》

开发工具与关键技术：Adobe Dreamweaver CC 2017
作者：落于的天_萧瑟
撰写时间：2019.1.18

一、网页小图标
首先创建一个标签，在rel 属性中添加 icon
再在href属性中添加自己想要添加的图片链接。

二、 CSS3构建一个正方体
首先我们创建一个

，再创建六个子元素

再给最外层

设置样式
.zft { position: relative;
transition: 5s;
transform-style:preserve-3d;/设置3D/
transform: rotateX(-45deg) rotateY(45deg);
transform-origin:0px 0px 0px;/坐标/
}
然后再给内层

添加公共样式
.zft div { top: 0px;
left: 0px;
width: 150px;
height: 150px;
position: absolute;
}
再分别给六个

设置样式
下面截图有样式：

我们要实现正方体那必须是六个面，所以我们需要给每一个子元素设置不同的
css3的样式，使他们拼接成一个正方体。
首先我们需要用到定位position: absolute;让第一个元素向左移动75px，然后再沿着Y轴
翻转90°transform: rotateY(-90deg);在设置让其以3D形式呈现出来transform-style: left;再给
他设置背景颜色background: #221D1D;第一个就完成了。然后第二个到第六个都差不多。
最后再给最外层

添加transform: rotateX(-45deg) rotateY(45deg);使其看起来像一个正方体，再添加一个伪类效果就更好了。
.zft:hover{
transform: rotateX(-315deg) rotateY(315deg);
}

CSS3构建一个正方体相关推荐

three.js之自定义一个正方体（网格）
本节主要通过自定义顶点和平面的方式,创造一个立方体.真正的开始走近three.js. 效果图坐标系坐标系支持右手定则.图中红色是x轴,绿色是y轴,蓝色是z轴源码引入的插件js[本人的csdn也 ...
教你用CSS3画一个透视、旋转的正方体
教你用CSS3画一个透视.旋转的正方体正方体六个面,无非就是,将每个面进行translateZ提升/降低边长的一半,然后再进行rotate X/rotate Y (n*90deg)的旋转即可. ht ...
vue 圆形百分比进度条_快速构建一个圆形的进度条
在一些特别生的网站上,用户需要一个可视化的是示,以表明网站资源仍然在加载.从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果. 如果我们使用的是开箱即用的解决方案,它为我们提供 ...
css3样式实现正方体旋转效果
如视频的正方体旋转正方体 css3实现这个正方体需要用到transform样式以及animation样式具体结构: <body><div class="father&q ...
Qt OpenGL（二十八）——Qt OpenGL 核心模式-绘制一个正方体（正六面体）
Qt OpenGL(二十七)--Qt OpenGL 核心模式-绘制一个正方体(正六面体) 截止到上一篇文章,一川想使用Qt封装的类绘制一个旋转的彩色三角形的目标就实现了. 上一篇在介绍了使用变换矩阵的 ...
JAVA用最简单的方法来构建一个高可用的服务端，提升系统可用性
一.什么是提升系统的高可用性 JAVA服务端,顾名思义就是23体验网为用户提供服务的.停工时间,就是不能向用户提供服务的时间.高可用,就是系统具有高度可用性,尽量减少停工时间.如何用最简单的方法来搭建 ...
构建一个移动应用程序要花多少钱？
构建一个移动应用程序要花多少钱? How much does it cost to build a mobile app? 不幸的是,对于一个移动应用程序的开发成本应该是多少这个问题,没有一个单一的答 ...
构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
基于PyTorch，如何构建一个简单的神经网络
本文为 PyTorch 官方教程中:如何构建神经网络.基于 PyTorch 专门构建神经网络的子模块 torch.nn 构建一个简单的神经网络. 完整教程运行 codelab→ https://ope ...
揭秘华为AI一站式开发平台，3步构建一个AI模型 | 华为昇腾师资培训沙龙西安场...
2018 年,在第三届 HUAWEI CONNECT(华为全联接大会)上,华为首次公布了 AI 战略与全栈全场景 AI 解决方案,其中包含全球首个覆盖全场景人工智能的华为昇腾(Ascend)系列处理器 ...

CSS3构建一个正方体

CSS3构建一个正方体相关推荐

最新文章

热门文章