CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器

最新推荐文章于 2022-12-31 20:18:24 发布

小婵婵不怕鬼

最新推荐文章于 2022-12-31 20:18:24 发布

阅读量252

点赞数

分类专栏： css学习文章标签：动画 css 学习

本文链接：https://blog.csdn.net/qq_49080239/article/details/125566707

版权

css学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

什么是2D什么是3D？
2D就是一个平面，只是宽度和高度，没有厚度。
3D就是一个立体，有宽度有高度，还有厚度。
默认情况下所有的元素都是呈2D展现的。

如何让某个元素呈3D展现？
和透视一样，只需给该元素的父元素添加一个transform-style属性，然后设置为preserve-3d即可。

正方体第一种方案：

ul{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
            transform: rotateY(0deg) rotateX(0deg);
            transform-style: preserve-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: #ffada3;
            transform: translate(-100px) rotateY(90deg);
        }
        ul li:nth-child(2){
            background-color: #ffcaf3;
            transform: translate(100px) rotateY(90deg);
        }
        ul li:nth-child(3){
            transform: translateY(100px) rotateX(90deg);
            background-color: #cdcdcd;
        }
        ul li:nth-child(4){
            transform: translateY(-100px) rotateX(90deg);
            background-color: #67676d;
        }
        ul li:nth-child(5){
            transform: translateZ(-100px);
            background-color: cornflowerblue;
        }
        ul li:nth-child(6){
            transform: translateZ(100px);
            background-color: greenyellow;
        }

在这里插入图片描述
正方体第二种方案：前后上下内容不会翻转。

ul li:nth-child(1){
            background-color: #ffada3;
            transform: rotateX(90deg) translateZ(100px) ;
        }
        ul li:nth-child(2){
            background-color: #ffcaf3;
            transform: rotateX(180deg) translateZ(100px);
        }
        ul li:nth-child(3){
            transform: rotateX(270deg) translateZ(100px) ;
            background-color: #cdcdcd;
        }
        ul li:nth-child(4){
            transform: rotateX(360deg) translateZ(100px);
            background-color: #67676d;
        }
        ul li:nth-child(5){
            transform: translateX(-100px) rotateY(90deg);
            background-color: cornflowerblue;
        }
        ul li:nth-child(6){
            transform: translateX(100px) rotateY(90deg);
            background-color: greenyellow;
        }
        /*上、后、下、前分别绕X轴旋转90度、180度、270度、360度然后沿Z轴平移100像素*/

在这里插入图片描述
如何做一个长方体？
先做一个正方体，给需要拉宽的面设置scale参数。
例：scale(1.5,1)

3D动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        body{
            perspective: 500px;/*近大远小的效果*/
        }
        ul{
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
            transform: rotateY(0deg) rotateX(0deg);
            transform-style: preserve-3d;
            animation: move 5s linear 0s infinite normal;
        }
        @keyframes move {
            from{
                transform: rotateX(0deg);
            }
            to{
                transform: rotateX(360deg);
            }
        }
        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 img{
            width: 200px;
            height: 200px;
            /*只要父元素被拉伸了子元素也会被拉伸*/
        }
        ul li:nth-child(1){
            transform: rotateX(90deg) translateZ(100px) scale(1.5,1);
        }
        ul li:nth-child(2){
            transform: rotateX(180deg) translateZ(100px) scale(1.5,1);
        }
        ul li:nth-child(3){
            transform: rotateX(270deg) translateZ(100px) scale(1.5,1);
        }
        ul li:nth-child(4){
            transform: rotateX(360deg) translateZ(100px) scale(1.5,1);
        }
        ul li:nth-child(5){
            transform: translateX(-200px) rotateY(90deg);
        }
        ul li:nth-child(6){
            transform: translateX(200px) rotateY(90deg);
        }
        /*上、后、下、前分别绕X轴旋转90度、180度、270度、360度然后沿Z轴平移100像素*/
        /*长方体，给需要拉宽的面设置scale参数*/
    </style>
</head>
<body>
<ul>
    <li><img src="images/tp1"></li>
    <li><img src="images/tp2"></li>
    <li><img src="images/tp3"></li>
    <li><img src="images/tp4"></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

效果： 3D动画
3D播放器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D播放器</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        body{
            background: url("images/qq3.jpg") no-repeat;
            background-size: cover;/*无论浏览器有多宽有多高都能填满整个网页*/
            overflow: hidden;
        }
        ul{
            width: 200px;
            height: 200px;
            /*background-color: #ffcaf3;*/
            position: absolute;
            bottom: 100px;
            left: 50%;
            margin-left: -100px;
            transform-style: preserve-3d;
            /*transform: rotateX(-10deg);*/
            animation: move 6s linear 0s infinite normal ;
        }
        /*鼠标悬停在ul上时，动画暂停*/
        ul:hover{
            animation-play-state: paused;
        }
        /*鼠标悬停在ul时，所有图片变透明*/
        ul:hover li img{
            opacity: 0.5;
        }
        /*鼠标悬停在li上时，图片不透明，放大1.5倍*/
        ul li:hover img{
            opacity: 1;
            transform: scale(1.5);
        }
        @keyframes move {
            from{
                transform: rotateX(-10deg) rotateY(0deg);
            }
            to{
                transform: rotateX(-10deg) rotateY(360deg);
            }
            /*1、动画中如果有和默认样式同名的属性，会覆盖默认样式
              2、在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面。*/
        }
        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            font-size: 60px;
            line-height: 200px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul li img{
            width: 200px;
            height: 200px;
            border: 5px solid darkcyan;
            box-sizing: border-box;
        }
        ul li:nth-child(1){
            background-color: black;
            transform: rotateY(60deg) translateZ(200px);
        }
        ul li:nth-child(2){
            background-color: black;
            transform: rotateY(120deg) translateZ(200px);
        }
        ul li:nth-child(3){
            background-color: black;
            transform: rotateY(180deg) translateZ(200px);
        }
        ul li:nth-child(4){
            background-color: black;
            transform: rotateY(240deg) translateZ(200px);
        }
        ul li:nth-child(5){
            background-color: black;
            transform: rotateY(300deg) translateZ(200px);
        }
        ul li:nth-child(6){
            background-color: black;
            transform: rotateY(360deg) translateZ(200px);
        }
        .tree{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 100px;
            bottom: 100px;
            animation: move1 20s linear 0s infinite normal;
        }
        /*爱心移动轨迹*/
        @keyframes move1 {
            0%{
                left: 100px;
                bottom: 100px;
                opacity: 1;
            }
            20%{
                left: 550px;
                bottom: 600px;
                opacity: 0;
            }
            40%{
                left: 900px;
                bottom: 650px;
                opacity: 1;
            }
            60%{
                left: 1200px;
                bottom: 500px;
                opacity: 0;
            }
            80%{
                left: 1400px;
                bottom: 200px;
                opacity: 1;
            }
            90%{
                left: 1650px;
                bottom: 100px;
                opacity: 0;
            }
            100%{
                left: 1250px;
                bottom: 50px;
                opacity: 1;
            }
        }
        /*设置播放器的位置*/
        div{
            width: 300px;
            height: 100px;
            margin: 400px auto;
        }
    </style>
</head>
<body>
<ul>
    <li><img src="images/fj"></li>
    <li><img src="images/fj2"></li>
    <li><img src="images/fj3"></li>
    <li><img src="images/fj4"></li>
    <li><img src="images/fj3"></li>
    <li><img src="images/fj2"></li>
</ul>
<img src="images/xiaotubiao.png" class="tree">
<div>
    <audio src="images/好听的歌.mp3" autoplay="autoplay" loop controls="controls"></audio>
</div>

</body>
</html>

结果：动画在主页视频里
在这里插入图片描述

小婵婵不怕鬼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器

什么是2D什么是3D？2D就是一个平面，只是宽度和高度，没有厚度。3D就是一个立体，有宽度有高度，还有厚度。默认情况下所有的元素都是呈2D展现的。如何让某个元素呈3D展现？和透视一样，只需给该元素的父元素添加一个transform-style属性，然后设置为preserve-3d即可。正方体第一种方案：正方体第二种方案：前后上下内容不会翻转。如何做一个长方体？先做一个正方体，给需要拉宽的面设置scale参数。例：scale(1.5,1)3D动画：效果：3D播放器：结果：动画在主页视
复制链接

扫一扫