3D相框案例讲解（详细）

news2024/12/18 23:19:22

前言

通过现阶段的学习，我们已经掌握了HTML，CSS和JS部分的相关知识点，现在让我们通过一篇案例，来巩固我们近期所学的知识点。

详细视频讲解戳这里

任务一了解目标案例样式

1.1了解案例

3D相框

1.2 分析案例

首先我们看到一个完整的图片被分成16份，每张小图片都有黄色阴影衬托除3D效果，当我们点击按钮时，所有小图片按Z轴旋转360°并合称为一张照片，此时大照片也有黄色阴影衬托3D效果，再次点击按钮，大图片一同样的方式变回小照片。

源图片

1.3 整理思路

在HTML中创建按钮部分以及一个盒子。在CSS中修饰按钮，设置图片，定义图片移动方向及方式，定义阴影。在JS中实现按钮与盒子的交互，以及将一张图片分成16等份。

任务二创建3D相框文件包

创建一个本地文件

将源代码，以及所需图片放在一起。

任务三 HTML框架部分

3.1 按钮部分

按钮部分简单，仅需id和类名即可

<button id="a" class="c">Magic </button>

3.2 盒子部分

盒子部分同理，不同点是有两个类名，因为以后照片要向外扩，所以有两个类名，分别适应不同情况。

任务四 CSS初始样式部分

4.1 body样式

box-sizing: border-box;

}

body {

background-color: rgb(255, 255, 255);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

}

*{ } 这是一个通用选择器

flex-direction: column; - 这个属性设置flex容器的主轴方向为垂直

align-items: center; - 这个属性设置flex容器内项目在交叉轴上的对齐方式。

justify-content: center; - 这个属性设置flex容器内项目在主轴上的对齐方式。

4.2 按钮样式

.c{

background-color: #f9ca25;

color: #ffffff;

border: 0;

border-radius: 5px;

font-size: 18px;

padding: 12px 20px;

cursor: pointer;

position: fixed;

top: 30px;

z-index: 1;

}

border-radius: 5px; - 设置元素的边框圆角为5像素。

cursor: pointer; - 当鼠标悬停在元素上时，鼠标光标会变成指针形状。

position: fixed; - 设置元素的位置为固定定位。

z-index: 1; - 设置元素的堆叠顺序为1。

运行如下：

4.3 盒子样式

.c1{

display: flex;

flex-wrap: wrap;

justify-content: space-around;

width: 500px;

height: 500px;

position: relative;

}

.c2{

width: 600px;

height: 600px;

}

c1为图片完整前盒子，c2为图片拆分后盒子大小。

flex-wrap: wrap; - 设置flex容器的换行行为。

justify-content: space-around; - 设置flex容器内项目在主轴上的对齐方式。

position: relative; - 设置元素的位置为相对定位。

任务五 JS交互部分

5.1 按钮与盒子交互

const r1 = document.getElementById('b')

const r2 = document.getElementById('a')

r2.addEventListener('click', () => r1.classList.toggle('c2'))

意为实现id为a和id为b相互交互

任务六 JS图片分裂

6.1 功能实现

function fun(){

for(let i = 0; i <= 3; i++){

for(let j= 0; j <= 3; j++){

const x = document.createElement('div')

x.classList.add('x')

x.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`

r1.appendChild(x)

}

fun()

这里我们定义了一个名为fun的函数，并在函数内部创建了一个4x4的div元素网格。每个div元素都被添加到一个名为r1的容器中，并且每个div都有一个x类。

详情解析：

定义了一个名为fun的函数
开始一个外层循环，循环变量i从0开始，直到小于或等于3（即循环4次）。
在外层循环内部，开始一个内层循环，循环变量j从0开始，直到小于或等于3（即循环4次）。
在内层循环内部，创建一个新的div元素，并将其赋值给常量x。
给新创建的div元素添加一个名为x的类。这使得该元素可以通过CSS样式进行样式化。
设置新创建的div元素的backgroundPosition样式属性。这里使用了模板字符串来计算背景图片的位置。-j * 125和-i * 125的计算结果用于确定背景图像的显示位置。
将新创建的div元素x添加到名为r1的容器中。
调用fun函数，执行上述代码，创建并添加16个div元素到r1容器中。

任务七 CSS修饰图片

7.1 图片部分

.x{

background-image: url('../源代码/EZqwsBSPlvSda.webp');

background-repeat: no-repeat;

background-size: 500px 500px;

position: relative;

width: 125px;

height: 125px;

transition: 0.7s ease;

}

background-repeat: no-repeat; - 设置背景图像不重复。

position: relative; - 设置元素的位置为相对定位。

transition: 0.7s ease; - 定义一个过渡效果，当元素的某些属性值发生变化时，这个过渡效果会被应用。

.c1.c2 .x{

trandform: rotateZ(360deg);

}

这里我们使用了后代选择器和类选择器的组合来应用样式。

transform: rotateZ(360deg); - 这个属性应用了一个CSS变换，使得匹配的元素围绕Z轴旋转360度。

7.2 3D背景阴影部分

.x::after{

content: '';

background-color: #f6e58d;

position: absolute;

top: 8px;

right: -15px;

height: 100%;

width: 15px;

transform: skewY(45deg);

}

.x::before{

content: '';

background-color: #f9ca25;

position: absolute;

bottom: -15px;

left: 8px;

height: 15px;

width: 100%;

transform: skewX(45deg);

}

这段CSS代码使用了伪元素::after和::before来给具有类x的元素添加装饰性的效果。

position: absolute; - 将伪元素的定位设置为绝对定位。

transform: skewY(45deg); - 应用一个Y轴倾斜的变换效果，倾斜角度为45度，使得伪元素沿Y轴倾斜。

整合代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body {
            background-color: rgb(255, 255, 255);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .c{
            background-color: #f9ca25;
            color: #ffffff;
            border: 0;
            border-radius: 5px;
            font-size: 18px;
            padding: 12px 20px;
            cursor: pointer;
            position: fixed;
            top: 30px;
            z-index: 1;
        }
        .c1{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 500px;
            height: 500px;
            position: relative;
        }
        .c2{
            width: 600px;
            height: 600px;
        }
        .c1.c2 .x{
            transform: rotateZ(360deg);
        }
        .x{
            background-image: url(.//3d.webp);
            background-repeat: no-repeat;
            background-size: 500px 500px;
            position: relative;
            width: 125px;
            height: 125px;
            transition: 0.7s ease;  
        }
        .x::after{
            content: '';
            background-color: #f6e58d;
            position: absolute;
            top: 8px;
            right: -15px;
            height: 100%;
            width: 15px;
            transform: skewY(45deg);
        }
        .x::before{
            content: '';
            background-color: #f9ca25;
            position: absolute;
            bottom: -15px;
            left: 8px;
            height: 15px;
            width: 100%;
            transform: skewX(45deg);
        }
    </style>
</head>
<body>
    <button id="a" class="c">Magic </button>
    <div id="b" class="c1 c2"></div>
    <script>
        const r1 = document.getElementById('b')
        const r2 = document.getElementById('a')
        r2.addEventListener('click', () => r1.classList.toggle('c2'))
        function fun(){
            for(let i = 0; i <= 3; i++){
                for(let j= 0; j <= 3; j++){
                    const x = document.createElement('div')
                    x.classList.add('x')
                    x.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
                    r1.appendChild(x)
                }
            }
        }
        fun()
    </script>
</body>
</html>