css3之3D转换transform

css3之3D转换

  • 一.特点
  • 二.坐标系
  • 三.3D移动(translate3d)
    • 1.概念
    • 2.透视(perpective)(近大远小)(写在父盒子上)
  • 四.3D旋转(rotate3d)
    • 1.概念
    • 2.左手准则
    • 3.呈现(transfrom-style)(写父级盒子上)
    • 4.总结
  • 五.案例
    • 1.两面旋转
    • 2.导航栏
    • 3.旋转木马

一.特点

近大远小,后面看不见

二.坐标系

在这里插入图片描述

三.3D移动(translate3d)

1.概念

在这里插入图片描述

2.透视(perpective)(近大远小)(写在父盒子上)

在这里插入图片描述

四.3D旋转(rotate3d)

1.概念

在这里插入图片描述

2.左手准则

(1)沿着x轴旋转
在这里插入图片描述
(2)沿着y轴旋转
在这里插入图片描述

3.呈现(transfrom-style)(写父级盒子上)

在这里插入图片描述

4.总结

在这里插入图片描述

五.案例

1.两面旋转

在这里插入图片描述
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 350px;

        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .4s;
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;

        }

        .front {
            background-color: pink;
            z-index: 1;
        }

        .back {
            background-color: purple;
            /*背对背旋转180deg,字不会镜像*/
            transform: rotateY(180deg);


        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">黑马程序员</div>
        <div class="back">pink老师等你</div>
    </div>
</body>

</html>

2.导航栏

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    ul {
        margin: 100px;
    }

    ul li {
        float: left;
        margin: 0 5px;
        width: 120px;
        height: 35px;
        list-style: none;
        perspective: 500px;
    }

    .box {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all .4s;
        text-align: center;
        font-size: 16px;
        line-height: 35px;
    }

    .box:hover {
        transform: rotateX(90deg);
    }

    .front,
    .bottom {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

    }

    .front {
        background-color: pink;
        z-index: 1;
        transform: translateZ(17.5px);
    }

    .bottom {
        background-color: purple;
        transform: translateY(17.5px) rotateX(-90deg);
    }
</style>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">黑马程序员</div>
                <div class="bottom">pink老师等你</div>
            </div>
        </li>
    </ul>
</body>

</html>

3.旋转木马

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 600px;
        }

        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 250px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;

        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(001a3fe237b2c5e71eeca0a5ca44c68c.png) no-repeat;
            background-size: 300px 200px;

        }

        section:hover {
            animation-play-state: paused;
        }

        section div:nth-child(1) {

            transform: rotateY(60deg) translateZ(300px);
        }

        section div:nth-child(2) {

            transform: rotateY(120deg) translateZ(300px);
        }

        section div:nth-child(3) {

            transform: rotateY(180deg) translateZ(300px);
        }

        section div:nth-child(4) {

            transform: rotateY(240deg)translateZ(300px);
        }

        section div:nth-child(5) {

            transform: rotateY(300deg)translateZ(300px);
        }

        section div:nth-child(6) {

            transform: rotateY(360deg)translateZ(300px);
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>

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

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506356.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

精品PPT-2023年无人驾驶汽车车联网网络安全方案

以下是部分PPT内容&#xff0c;请您参阅。如需下载完整PPTX文件&#xff0c;请前往星球获取&#xff1a; 无人驾驶安全架构是一个复杂的系统&#xff0c;它涉及到多个关键组件和层次&#xff0c;以确保无人驾驶车辆在各种情况下都能安全、可靠地运行。以下是一些主要的无人驾驶…

并查集

本文用于个人算法竞赛学习&#xff0c;仅供参考 目录 一.什么是并查集 二.并查集实现 三.路径优化 四.时间复杂度 五.并查集路径压缩 模板 五.题目 一.什么是并查集 并查集&#xff08;Disjoint Set&#xff09;是一种数据结构&#xff0c;用于处理一系列不相交的集合的合…

javaIO

file类 一个File类的对象可以表示一个具体的文件或目录 mkdir 创建单级文件夹 mkdirs 创建多级文件夹 delete 删除一个文件夹时&#xff0c;文件夹里面必须是空的 listfiles 将文件夹的子集放到一个file类型的数组中 输入及输出的概念 输入input 输出output 把jav…

pyinstaller打包多线程pyqt5程序后,报错,反复弹窗等问题

报错1&#xff1a; Traceback (most recent call last): File “MPL.py”, line 502, in File “Lib\site-packages\PyInstaller\hooks\rthooks\pyi_rth_multiprocessing.py”, line 45, in _freeze_support ValueError: not enough values to unpack (expected 2, got 1) 报…

STM32学习笔记(10_3)- 软件I2C读写MPU6050

无人问津也好&#xff0c;技不如人也罢&#xff0c;都应静下心来&#xff0c;去做该做的事。 最近在学STM32&#xff0c;所以也开贴记录一下主要内容&#xff0c;省的过目即忘。视频教程为江科大&#xff08;改名江协科技&#xff09;&#xff0c;网站jiangxiekeji.com 本期开…

分布式之分布式事务详解

分布式事务与实战运用 什么是分布式事务&#xff1f; 业务场景&#xff1a;用户A转账100元给用户B&#xff0c;这个业务比较简单&#xff0c;具体的步骤&#xff1a; 1、用户A的账户先扣除100元 2、再把用户B的账户加100元 如果在同一个数据库中进行&#xff0c;事务可以保证…

C语言之Linux内核回调函数写法(八十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

论文阅读,Accelerating the Lattice Boltzmann Method(五)

目录 一、Article:文献出处&#xff08;方便再次搜索&#xff09; &#xff08;1&#xff09;作者 &#xff08;2&#xff09;文献题目 &#xff08;3&#xff09;文献时间 &#xff08;4&#xff09;引用 二、Data:文献数据&#xff08;总结归纳&#xff0c;方便理解&am…

Nginx的反向代理

Nginx的反向代理 location ^~ /aaa {proxy_pass http://192.168.15.78/; } 1. 跨域 2.Nginx 代理服务器缓存 3.Nginx 负载均衡 4. 动静分离 Nginx的跨域 跨源资源共享 (CORS) 是一种机制&#xff0c;它使用额外的 HTTP 标头让用户代理获得访问来自不同来域的服务器上选定资…

LongAdder 和 AtomicLong

有幸看到一篇关于这个讲解 2个类的讲解&#xff0c;自己也归纳总结一下。 一、解析 看源码底层会发现实现机制不一样&#xff0c;当然这个也是必须的 LongAdder 点进去之后会发现&#xff0c;CAS 它是一个CAS的实现类。至于Cell类JVM提供的内置函数 官方说法是&#xff1a;…

Python版【植物大战僵尸 +源码】

文章目录 写在前面&#xff1a;功能实现环境要求怎么玩个性化定义项目演示&#xff1a;源码分享Map地图:Menubar.py主菜单 主函数&#xff1a;项目开源地址 写在前面&#xff1a; 今天给大家推荐一个Gtihub开源项目&#xff1a;PythonPlantsVsZombies&#xff0c;翻译成中就是…

小程序开发调试指南

调试指南 一、Vconsole 一些线上问题需要在真机中进行调试或日志输出&#xff0c;为方便查看前端日志的输出&#xff0c;App 端提供了调试模式, 打开调试模式后面板界面中会显示 vConsole 按钮&#xff0c;点击后可打开手机端 vConsole界面查看日志输出。 1.如何开启 点击小…

JumpServer 堡垒主机

JumpServer 堡垒机帮助企业以更安全的方式管控和登陆各种类型的资产 SSH&#xff1a;Linux/Unix/网络设备等Windows&#xff1a;Web方式连接/原生RDP连接数据库&#xff1a;MySQL、Oracle、SQLServer、PostgreSQL等Kubernetes&#xff1a;连接到K8s集群中的PodsWeb站点&#x…

复现黄金票据

一、搭建环境 搭建域环境可以点击这个查看步骤 在这里面monowall的配置查看 二、实验步骤 拿到域名 拿到SID 使用mimikatz拿到krbtgt用户的哈希 删除票据 也可以使用mimikatz.exe删除票据&#xff0c;命令是kerberos::purge 伪造票据 拿到域控 伪造成功

物联网实战--入门篇之(六)嵌入式-WIFI驱动(ESP8266)

目录 一、WIFI简介 二、基础网络知识 三、思路讲解 四、代码分析 4.1 状态机制 4.2 客户端连接 4.3 应用数据接收处理 4.4 数据发送 4.5 主函数调用 4.6 网络连接ID分配 五、总结 一、WIFI简介 WIFI在我们生活中太常见了&#xff0c;手机电脑都可以用WiFi连接路由器进行上…

MySQL核心命令详解与实战,一文掌握MySQL使用

文章目录 文章简介演示库表创建数据库表选择数据库删除数据库创建表删除表向表中插入数据更新数据删除数据查询数据WHERE 操作符聚合函数LIKE 子句分组 GROUP BY HAVINGORDER BY(排序) 语句LIMIT 操作符 分页查询多表查询-联合查询 UNION 操作符多表查询-连接的使用-JOIN语句编…

从0到1手把手撸码搭建后台管理系统

从0到1手把手撸码搭建后台管理系统 第一章:系统介绍开发目的与过程 要使用 Vue3 搭建后台&#xff0c;你可以按照以下步骤进行&#xff1a; 安装 Vue3&#xff1a;使用包管理工具&#xff08;如 npm 或 yarn&#xff09;安装 Vue3。选择构建工具&#xff1a;选择一个适合的构…

Spring之循环依赖

什么是循环依赖? 依赖的相互引用,如下列的这种形式 Component public class A {Autowiredprivate B b;}Component public class B {Autowiredprivate A a; } Spring是如何解决循环依赖的 Spring是通过三级缓存来解决循环依赖 singletonObjects : 单例bean,已经实例化,完成…

非周期连续函数的傅里叶变换

首先 我们把一个非周期信号扩展成一个周期信号 然后用傅里叶级数展开 也可以得到对应的级数系数 利用周期趋向于无穷大 可以把傅里叶级数展开就变成了一个积分 而神奇的是积分里其实还有一个积分 这样我们就得到了傅里叶变换对 我们把里面的积分成为函数的傅里叶变换 把外面…

C语言交换二进制位的奇数偶数位

基本思路 我们要先把想要交换的数的二进制位给写出来假如交换13的二进制位&#xff0c;13的二进制位是 0000 0000 0000 0000 0000 0000 0000 1101然后写出偶数位的二进制数&#xff08;偶数位是1的&#xff09; 1010 1010 1010 1010 1010 1010 1010 1010然后写出奇数位的二进…