CSS3构建一个正方体

                                    《专题技术文献》
开发工具与关键技术:Adobe Dreamweaver CC 2017
作者:落于的天_萧瑟
撰写时间:2019.1.18

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

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

,再创建六个子元素 CSS3构建一个正方体_第2张图片
再给最外层
设置样式
.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构建一个正方体_第3张图片
我们要实现正方体那必须是六个面,所以我们需要给每一个子元素设置不同的
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构建一个正方体_第4张图片

你可能感兴趣的:(css3正方体)