CSS3构建一个正方体

时间：2024-03-26 10:29:56
                                    《专题技术文献》

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

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

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

，再创建六个子元素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构建一个正方体
我们要实现正方体那必须是六个面，所以我们需要给每一个子元素设置不同的
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构建一个正方体

相关文章