CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战(07)

举报
1_bit 发表于 2022/08/04 22:25:04 2022/08/04
【摘要】 若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。 一、transform-origin transform-o...

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。

一、transform-origin

transform-origin 用于更改当前元素的中心点,使元素在根据中心点做一些动效使做出更多的姿态。

transform-origin 表示当前元素的基点,使用 transform-origin 可以对目标元素的基点进行设置,在 3D 效果中,transform-origin 可以灵活运用制作出非常舒服的动态效果,给你的页面增加不少的分数。

以下是一个基础的 transform-origin 示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画重点</title>
    <style>
        .main-box {
            width: 100%;
            height: 100%;
            text-align: center;
        }
        
        .base-point {
            transform-origin: 0px 0px;
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: brown;
            transition: transform 1s;
        }
        
        .base-point:hover {
            transform: rotate(30deg);
        }
    </style>
</head>

<body>
    <div class="main-box">
        <div class="base-point">

        </div>
    </div>
</body>

</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

rotate

在以上的示例中,main-box 用作对主要 div 进行设置,设置其高宽以及其内容水平对齐方式,在此设置水平对齐为居中;随后样式 base-point 用于设置其 main-box 包裹的 div ,设置其 div display: inline-block;,此样式使其能够居中显示,随后设置了宽高、背景色以及过度效果 transition,transition 所监听的变换是 transform,时间是一秒,transform 在之后用于 rotate 旋转角度:
在这里插入图片描述
此时基本情况我们已经了解,现在查看 transform-origin: 0px 0px;,这段样式表示设置调用该类的元素的原点在左上角,因为其值为 0px 0px,其中 第一个 0px 表示 x,第二个 0px 表示 y,那么我们查看一个 div:
在这里插入图片描述
该 div 左上角的位置则是 0px 0px,x 越往右越大,y 越往下越大;接着查看样式 base-point:hover 鼠标悬浮后,使用 transform 设置其元素旋转 45 度,其中 deg 为单位,效果如下:
请添加图片描述
此时我们可以看到,左上角为一个轴心点,而这个轴心点则是我们定义的基点。

此时我们还可以使用 scale 对其进行缩放,scale 接收两个值,一个是 x 和一个 y,缩放取值0-1之间,若大于 1 则是放大,样式修改如下:

<style>
.base-point:hover {
     transform: scale(1.2, 1.5);
 }
</style>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

效果如下:
请添加图片描述
此时依旧依照左上角进行缩放,我们可以换成右上角,xy 值为 300px 0:
在这里插入图片描述
效果如下:
请添加图片描述
此时我们还可以使用 百分比定义基点位置:
在这里插入图片描述
此时我们可以给予该元素距离定点一定距离,设置基点为中心(其实基点直接说中心点可能较为容易理解):
在这里插入图片描述
随后效果如下:
请添加图片描述

transform-origin 除了xy外还有另外一个参数 z,z 表示 z 轴,完整语法:transform-origin: x-axis y-axis z-axis;

需要搞清楚 z 的意思我们先从 rotate、translate 的 3D 值开始。

二、rotate3d

rotate3d:rotate3d() CSS函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义;
如果为正,运动将为顺时针,如果为负,则为逆时针。(摘抄)

旋转轴由一组 [x, y, z] 矢量定义,如果这些矢量被赋予非标准值,即3个坐标值的平方和不等于1时,它将会被内部隐式标准化。非标准矢量,例如空值和 [0, 0, 0],将会使旋转不起作用,但是不影响整个CSS属性的其他效果。

空间位置

首先我们得搞清楚这个矢量在CSS 3D转换是什么,矢量在物理学中称作矢量,在数学中称作向量,而咱们使用 rotate3d() 函数输入的 x y z 则是一个矢量位置,矢量位置则是原点(0,0,0)到 这个终点的距离。

默认状态下 x y z 为0,在 rotate3d() 中有规定,空值(就是全部xyz值为0)时将会不生效:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画重点</title>
    <style>
        .main-box {
            width: 100%;
            height: 100%;
            margin-top: 300px;
            text-align: center;
            position: relative;
        }
        
        .box1,
        .box2 {
            position: absolute;
            width: 300px;
            height: 300px;
            display: inline-block;
            transition: transform 1s;
        }
        
        .box1 {
            /*transform: rotateY(60deg);*/
            background-color: brown;
        }
        
        .box1:hover {
            transform: rotate3d(0, 0, 0, 90deg);
        }
    </style>
</head>

<body>
    <div class="main-box">
        <img class="box1" src="./img/img05.jpg" />

    </div>
</body>

</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

在这里插入图片描述

接着,咱们使第一个 0,也就是 x 表示沿 x 轴进行旋转,若用一个正方体做比方,此时该点应该是在此位置:

在这里插入图片描述

在这里插入图片描述

效果如下:
请添加图片描述

我们再把 y 值更改为 1,然后其他值归零:
请添加图片描述

Z轴:
在这里插入图片描述

请添加图片描述

由此我们可以看出,期中心点在元素中间:

在这里插入图片描述
而其中的角度正值表示顺时针旋转,负值表示逆时针旋转,旋转方式如图所示:
在这里插入图片描述
从图中我们可以得知,我们以箭头方向形成一个平面,这个平面的顺时针则是该轴角度为正是的顺时针方向。

复杂旋转

此时我们更改 rotate3d 为:
在这里插入图片描述
那么此时将会自定义轴,该轴为改点位置与圆心位置连成的直线:

在这里插入图片描述
根据该轴进行旋转
请添加图片描述
若此时将值改成 (1,2,0):
在这里插入图片描述

那么对应所产生的轴也会发生变化:

在这里插入图片描述
最终的旋转效果如下:
请添加图片描述

此时我们可以对比,其依照的轴已经发生变化。若此时改动转动位置:
在这里插入图片描述

在空间中位置(画得丑,自己可以画一下)将会有一个延伸出来的 3D 轴,那么此时的转动有了 z 轴的参与将会变得更像往下请添加图片描述
“盖住”的翻转:

在这里插入图片描述

效果如下:
请添加图片描述

三、使用 CSS 做一个 3d 盒子

为了更好的演示 3d 相关内容,在此使用 css 制作一个 3D盒子。

首先先创建一个 div 使其包裹对应的3d 盒子,在此需要给予一个样式,使其居中并且有一定的 margin ,否则显示起来并不会利于查看:

<style>
.container {
    width: 100%;
    margin: 200px auto;
    text-align: center;
}
</style>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

接着在 body下编写 div,使其调用该样式:

<div class="container">
</div>

  
 
  • 1
  • 2

接下来为 3d 盒子创建一个主要的父容器进行包裹,给予样式;因为我们的外部容器设置了 text-align ,那么其内元素需要居中则需要使用 display 设置 div 为其他类型元素,在此设置为 display: inline-block;,由于在创建 3d 盒子 时,需要对其内部进行脱离文档流,需要设置其 postion 为 relative,为其具有 3d 效果 在设置 transform-style 为 preserve-3d,在给予对应 background-color ,最后设置其宽高:

<style>
.box {
     display: inline-block;
     width: 200px;
     height: 200px;
     position: relative;
     transform-style: preserve-3d;
     background-color: brown;
 }
</style>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

整体代码如下:
在这里插入图片描述
此时页面效果如下:
在这里插入图片描述
接着,该div这是用于包裹 3d 盒子,在此我们制作3d 盒子是通过对 div 进行翻转,我们需要在这个 div 下创建 6 个 div 表示其 6 个对应的面,并且这 6 个面必须有一定的大小,在此创建一个样式为其设置宽高,以及对应的 position:
在这里插入图片描述

接着我们先创建第一个 div 并且调用其样式:
在这里插入图片描述
由于每一个面使用不同颜色方便区分,在此我们给予一个背景颜色:
在这里插入图片描述
此时页面显示如下:
在这里插入图片描述
此时再复制一个 div 作为左侧的盒子面,并且给予对应的背景色:
在这里插入图片描述
在此我们可以看到,在给予对应颜色时还使用了 rotate3d 毒气进行沿着 y轴进行转化,但此时页面由于是正视关系,所以看不见,需要移动柜整个盒子的父容器,所以在此我们在 box 样式中添加转动:
在这里插入图片描述
此时页面显示如下:
在这里插入图片描述

此时我们应该想到,直接使用中心点转化即可完成当前页面的转动使其归于正确的位置:
在这里插入图片描述
改变对应的中心点,使其沿着最左侧 Y 轴进行旋转即可完成,效果如下:
在这里插入图片描述
接着我们创建右侧的面,一样是创建一个 div,增加一个样式后更改其对应的中心点以及旋转角度进行转换:
在这里插入图片描述
效果如下:
在这里插入图片描述

此时我们发现当前 3d 盒子 有些面不方便查看,直接给予 box 一个 hover,使其可以转换,首先在 box 中增加一个过渡,使其 hover 时能够更好的观察其他面:
在这里插入图片描述

接着再编写对应的 hover:
在这里插入图片描述
效果如下:
请添加图片描述
此时被遮挡的区域已经可视,此时咱们继续增加对应的 div 和样式为其增加面,首先制作后面的面,只需要使用 translate 在 Z 轴往后平移与其宽度一样的值即可:
在这里插入图片描述
效果如下:
在这里插入图片描述
再接着制作 top 和 bottom 的面即可,原理跟以上类似,不过转化轴发生了改变而已,完整代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Box 1_bit</title>
    <style>
        .container {
            width: 100%;
            margin: 150px auto;
            text-align: center;
        }
        
        .box {
            display: inline-block;
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            background-color: brown;
            transform: rotate3d(1, 1, 0, 65deg);
            transition: transform 1.6s;
        }
        
        .box:hover {
            transform: rotate3d(1, 1, 0, 265deg);
        }
        
        .plane {
            width: 200px;
            height: 200px;
            position: absolute;
        }
        
        .plane-before {
            background-color: chocolate;
        }
        
        .plane-left {
            background-color: crimson;
            transform-origin: 0% 0%;
            transform: rotate3d(0, 1, 0, 90deg);
        }
        
        .plane-right {
            background-color: rgb(220, 20, 203);
            transform-origin: 100% 100%;
            transform: rotate3d(0, 1, 0, -90deg);
        }
        
        .plane-bottom {
            background-color: rgb(20, 80, 220);
            transform-origin: 100% 100%;
            transform: rotate3d(1, 0, 0, 90deg);
        }
        
        .plane-top {
            background-color: rgb(240, 113, 45);
            transform-origin: 0% 0%;
            transform: rotate3d(1, 0, 0, -90deg);
        }
        
        .plane-after {
            background-color: rgb(220, 20, 20);
            transform: translateZ(-200px)
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <div class="plane plane-before">

            </div>
            <div class="plane plane-left">

            </div>
            <div class="plane plane-right">

            </div>
            <div class="plane plane-after">

            </div>
            <div class="plane plane-bottom">

            </div>
            <div class="plane plane-top">

            </div>
        </div>
    </div>
</body>

</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97

最终效果如下:
请添加图片描述

四、scale3d 使用

有了 3d盒子 后可以更好的对 3d 盒子进行 Z 轴上的演示。scale3d 接收 x、y、z 3个轴的值作为参数,我们在此演示 z 轴。

在此将 box 的 hover 样式更改为对应的 scale3d:
在这里插入图片描述

在此需要注意,其旋转内容保持不变,否则将会 hover 后变成未旋转,x和y为1表示 x y 轴上缩放不变,z 轴增加,效果如下:
请添加图片描述

文章来源: i1bit.blog.csdn.net,作者:1_bit,版权归原作者所有,如需转载,请联系作者。

原文链接:i1bit.blog.csdn.net/article/details/124004301

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200