制作简易的正方体

最新推荐文章于 2024-07-20 22:13:44 发布

向往的远方。

最新推荐文章于 2024-07-20 22:13:44 发布

阅读量176

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/hefengshun/article/details/119894457

版权

1.第一张为HTML，第二张为css，

之中我们用到了3d效果，需注意

transform-style: preserve-3d;

必须写到父标签的样式中，否则不生效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/筛.css">
</head>
<body>
    <div id="one">
        <div>
            1
        </div>
        <div>
            6
        </div>
        <div>
            2
        </div>
        <div>
            5
        </div>
        <div>
            3
        </div>
        <div>
            4 
        </div>
    </div>
</body>
</html>

#one{
    /* 用3d效果父标签必须写上transform-style：preserve-3d */
    transform-style: preserve-3d;
    /* 这里是让图片倾斜方便观察z轴上的视角 */
    transform: rotateX(30deg)rotateY(-40deg) ;
}
#one div{
    width: 200px;
    height: 200px;
    /* 固定定位可以讲写的东西在一个地方开始，
        达到层叠的效果 
    */
    position: absolute;
    border: 1px chocolate solid;
}
#one div:nth-child(1){
    /* 以下中translatez(100px); 
        则是为了前面div的层叠以及z轴的距离做出改变，定义向z轴平移100px ，
        transform：rotate x.y.z()
        则是用来旋转的 x.y.z分别是x轴y轴z轴，
        但是注意的是“旋转还是按照开始叠层时样子的中心点来旋转的”，
        所以平移每个小div的一半，通过每个角度的不停旋转就可以完成一个正方体
     */
    transform: rotateX(0deg) translatez(100px);
}
#one div:nth-child(2){
    transform: rotateX(90deg) translatez(100px);
}
#one div:nth-child(3){
    transform: rotateX(180deg) translatez(100px);
}
#one div:nth-child(4){
    transform: rotateY(90deg) translateZ(100px);
}
#one div:nth-child(5){
    transform: rotateY(-90deg) translateZ(100px);
}
#one div:nth-child(6){
    transform: rotateX(-90deg) translatez(100px);
}

向往的远方。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作简易的正方体

1.第一张为HTML，第二张为css，之中我们用到了3d效果，需注意transform-style:preserve-3d;必须写到父标签的样式中，否则不生效。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1..
复制链接

扫一扫