HTML和CSS学习-------3D转换模块

最新推荐文章于 2022-10-17 17:41:35 发布

我是你的可爱爱

最新推荐文章于 2022-10-17 17:41:35 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/weixin_43669367/article/details/89516800

版权

3D转换模块
1.什么是2D和3D
2D就是一个平面，只有宽度和高度，没有厚度
3D就是一个立体，有宽度和高度，还有厚度
默认情况下所有的元素都是呈2D展现的
2.如何让某个元素呈3D展现
和透视一样，想看到某个元素的3D效果，只需要给他的父元素添加一个transform-style属性，然后设置为preserve-3d即可
练习注意点：1.做正方体的上下左右面，可以先让他往左边或是右边（上边或是下边）平移原来宽度的一半，然后再旋转九十度，而前后面只需要让他往Z轴方向平移宽度的一半即可
2.将正方形转变为长方形只需要给它六个面设置一下scale属性进行拉伸，然后再将左右两边的面的平移长度拉伸相同的倍数即可。

注意：只要父元素被拉伸了，子元素也会被拉伸

  3D播放器练习注意点

1.动画中如果有和默认样式同名的属性，会覆盖默认样式中同名的属性
2.在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面
以下是做网页中的3D长方体的代码长方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长方体</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            perspective:500px;
        }
        ul{
            width: 200px;
            height: 200px;
            margin:100px auto;
            //border: 1px solid #000;
            position:relative;
            box-sizing: border-box;
            transform:rotateY(0deg) rotateX(0deg);
            transform-style:preserve-3d;
            animation:sport 5s linear 0s infinite  normal;
        }
        ul li{
            width: 200px;
            height: 200px;
            list-style:none;
            position:absolute;
            line-height:200px;
            text-align:center;
        }
        ul li:nth-child(1){
            background-color:red;
            transform:translateY(100px) rotateX(270deg) scale(2,2);
        }
        ul li:nth-child(2){
            background-color:#ccc;
            transform:translateZ(200px) rotateX(360deg) scale(2,1);
        }
        ul li:nth-child(3){
            background-color:green;
            transform:translateY(-100px) rotateX(90deg) scale(2,2);
        }
        ul li:nth-child(4){
            background-color:pink;
            transform:translateZ(-200px) rotateX(180deg) scale(2,1);
        }
        ul li:nth-child(5){
            background-color:orange;
            transform:translateX(200px) rotateY(90deg) scale(2,1);
        }
        ul li:nth-child(6){
            background-color:skyblue;
            transform:translateX(-200px) rotateY(90deg) scale(2,1);
        }
        @keyframes sport{
            from{
                transform:rotateX(0deg);
            }
            to{
                transform:rotateX(360deg);
            }
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

我是你的可爱爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS学习-------3D转换模块

3D转换模块1.什么是2D和3D2D就是一个平面，只有宽度和高度，没有厚度3D就是一个立体，有宽度和高度，还有厚度默认情况下所有的元素都是呈2D展现的2.如何让某个元素呈3D展现和透视一样，想看到某个元素的3D效果，只需要给他的父元素添加一个transform-style属性，然后设置为preserve-3d即可练习注意点：1.做正方体的上下左右面，可以先让他往左边或是右边（上边或是...
复制链接

扫一扫