运用HTML5+CSS3完成三d变换实际效果案例详解

日期:2020-10-16 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

序言

本文详细介绍的是css3的3d控制模块,对大伙儿具备1定的参照使用价值,感兴趣爱好的盆友们下面来1起看看吧。

详细介绍

最先,大家来掌握1下3d的座标系,x轴在显示屏上为水平方位,y轴为竖直方位,而z轴为竖直于显示屏的方位。

没理解的话能够参照精准定位特性的z-index特性,那个在某种实际意义上便是让元素在z轴的挪动。

在2d变换控制模块中大家科学研究了rotateX()和rotateY()方式,便是绕x轴和y轴转动,这实际上便是3d控制模块的1种主要表现,自然要看到近大远小的3d实际效果,还必须在父元素上加上透視特性:transform:perspective(500px);值为透視点到元素的间距,实际定义请看工艺美术透視课堂教学。。。。

多说无利,上编码:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .div1{
            margin-top: 100px;
            transform:perspective(500px) rotatey(0deg);
            position: relative;
            border:1px solid #000000;
            background-color: #ff0000;
        }
        .div1 div{
       transform:rotatey(45deg);

            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">1</div>
</div>
</body>

</html>

实际效果图:

 

可是,你会发现当父元素转到90度的情况下元素消退了,这就表明元素是沒有厚度的。表明元素尽管具备了近大远小的透視特性,但实质上还是2d的。

这是你必须加上transform-style:preserve⑶d;款式来让元素在3d室内空间中变换。这样,元素就处在了3维的室内空间里,当父元素转动90度,仍能看到里边的子元素。

示例编码:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .div1{
            margin-top: 100px;
            transform:perspective(500px) rotatey(0deg);
            transform-style:preserve⑶d;
            position: relative;
            border:1px solid #000000;
        }
        .div1 div{
            background-color: #ff0000;
            transform:rotatey(45deg);
            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">1</div>
</div>
</body>

</html>

实际效果图:  

  

上面,大家对3d变换控制模块有了1个基本的掌握,下面大家1起做1个正方体,来梳理1下3d控制模块的专业知识。

1步步来做着写太过不便,我就将全过程写在编码的注解里,小伙子伴们请见谅。

编码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>变换控制模块-正方体</title>
    <style>

    *{
        margin: 0;
        padding: 0;
        /*除去默认设置边距*/
    }

    ul{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        box-sizing: border-box;
        margin: 100px auto;
        position: relative;
        /*改动基础款式*/
        transform: rotateY(45deg) rotateX(45deg);
        /*转动看看实际效果*/
        transform-style: preserve⑶d;
        /*将父元素设定为3d室内空间*/
    }
    ul li{
        list-style: none;
        width: 200px;
        height: 200px;
        font-size: 60px;
        text-align: center;
        line-height: 200px;
        position: absolute;
        left: 0;
        top: 0;
        /*改动基础款式*/
    }
    ul li:nth-child(1){
        background-color: red;
        transform: translateX(⑴00px) rotateY(90deg);
        /*将第1个l向左挪动100像素,随后绕y轴转动90度,产生左侧的面*/
    }
    ul li:nth-child(2){
        background-color: green;
        transform: translateX(100px) rotateY(90deg);
        /*将第1个2向右挪动100像素,随后绕y轴转动90度*,产生右侧的面*/
    }
    ul li:nth-child(3){
        background-color: blue;
        transform: translateY(⑴00px) rotateX(90deg);
        /*将第1个3向上挪动100像素,随后绕x轴转动90度,产生上面的面*/
    }
    ul li:nth-child(4){
        background-color: yellow;
        transform: translateY(100px) rotateX(90deg);
        /*将第1个4向下挪动100像素,随后绕x轴转动90度*/
    }
    ul li:nth-child(5){
        background-color: purple;
        transform: translateZ(⑴00px);
        /*将第1个5向后挪动100像素,产生后边的面*/
    }
    ul li:nth-child(6){
        background-color: pink;
        transform: translateZ(100px);
        /*将第1个l向前挪动100像素,产生前面的面*/
    }

</style>
</head>
<body>
<ul>
    <!--最先做好html合理布局,正方体有6个面,因此写了6个li-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

实际效果图:

这个方式较为好了解,了解了以后请看下1个。

编码在下面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            /*改动基础款式*/
        }
        .div1{
            margin-top: 100px;
            transform: perspective(400px) rotatex(0deg) rotatey(0deg);
            /*有着近大远小透視实际效果*/
            transform-style: preserve⑶d;
            /*设定为3d室内空间*/
            position: relative;
            border:1px solid #000000;
            animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
            /*转动动漫*/
        }
        .div1 div{
            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
            /*內部款式*/
        }
        .div1_1{
            transform: translatez(100px);
            background-color: red;
            /*向前挪动100像素,做为最前面的面*/
        }
        .div1_2{
            transform: rotatex(90deg) translatez(100px);
            background-color:green;
            /*绕x轴转动90度,在z轴正方位挪动100像素,做为上面的面*/
            /*注:转动时座标系会跟随1起转动,z轴原先是竖直显示屏向外的,绕x轴转动90度之后便是在显示屏上向上的方位*/
        }
        .div1_3{
            transform: rotatex(180deg) translatez(100px);
            background-color: blue;
            /*绕x轴转动180度,这时候z轴竖直显示屏向内,在z轴正方位挪动100像素,做为后边的面*/
        }
        .div1_4{
            transform: rotatex(270deg) translatez(100px);
            background-color: purple;
            /*绕x轴转动270度,这时候z轴向下,在z轴正方位挪动100像素,做为下面的面*/
        }
        .div1_5{
            transform: rotatey(90deg) translatez(100px);
            background-color: pink;
            /*绕y轴转动90度,这时候z轴向右,在z轴正方位挪动100像素,做为右面的面*/
        }
        .div1_6{
            transform: rotatey(270deg) translatez(100px);
            background-color: yellow;
            /*绕y轴转动90度,这时候z轴向左,在z轴正方位挪动100像素,做为左边的面*/
        }
        @-webkit-keyframes xuanzhuan{
            from{
                transform:perspective(400px) rotatex(0deg);
            }
            to{
                transform:perspective(400px) rotatex(360deg);
            }
        }
        .div1:hover{
            transform: perspective(400px) scale(1.5);
            animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
            /*有hover恶性事件是动漫中止*/
        }

    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">1</div>
    <div class="div1_2">2</div>
    <div class="div1_3">3</div>
    <div class="div1_4">4</div>
    <div class="div1_5">5</div>
    <div class="div1_6">6</div>
</div>
<!--html标识合理布局-->
</body>
</html>

实际效果图:

这类写法要是了解了,写起来会更为的便捷,并且不无需去考虑到变换的角度不对会致使內容是反的,因此强烈推荐这1种写法。自然这类写法在x轴和y轴1起转动是也会导致內容的翻转。

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。