HTML5:七天学会基础动画网页10

继续介绍3D转换:

3D转换:rotate3d

方法与说明

rrotateX(angle)otate3d(x,y,z,angle[角度])   

3D转换,正常取值0/1,0代表当前轴线不进行旋转,1反之,例:rotate3d(1,1,1,30deg),代表三个轴线都要旋转30度 rotate3d(0,1,1,30deg)代表X轴不旋转,Y,Z轴旋转30度。

rotateX(angle)      3D转换,X轴的值。

rotateY(angle)      3D转换,Y轴的值。

rotateZ(angle)      3D转换,Z轴的值。

改变旋转点

transform-origin:x-axis y-axis z-axis;

x-axis:定义视图被置于X轴的何处,可能的值             left,center,right,length,%

y-axis:定义视图被置于Y轴的何处,可能的值            top,center,bottom,length,%

z-axis:定义视图被置于Z轴的何处,可能的值

          length,眼睛看到屏幕的距离

例:transform-origin:right top 0px;

 

transform-style属性

(谁要呈现3D效果就写在其父元素上)

flat                   子元素将不保留其3D效果

preserve-3d    子元素将保留其3D效果

perspective-origin属性

视角,改变观察位置,(一般不调整,因为可能影响原比例)

perspective-origin:x-axis y-axis;

x-axis: left,center,right,length,%默认值:50%

y-axis:top,center,bottom,length,%默认50%

看了这么多,那我们来写一个交叉的平面例子:

<style>

        *{

            margin: 0;

            padding: 0;

        }

    body{

         /* 没有视距没有立体效果 */

       perspective: 1000px;

    }

    .box{

        width: 300px;

        height: 300px;

        border: 1px solid black;

        margin: 100px auto;

        padding: 10px;

        position: relative;

        /* 写在父元素上保留3D效果 */

        transform-style: preserve-3d;

    }

    .a,.b{

        /* w和h不用100%,因为会继承父元素padding值而脱标 */

        width: 300px;

        height: 300px;

        background-color: seagreen;

        position: absolute;

    }

    .b{

        background-color: skyblue;

        transform: rotateX(60deg);

    }

    .box:hover{

        transform: rotateY(60deg);

        /* 加一个过渡,使放置变化在两秒中完成 */

        transition: all 2s;

    }

    </style>

</head>

<body>

    <div class="box">

    <div class="a"></div>

    <div class="b"></div>

    </div>

   </body>

d67f605a8bd044d2a25ebba01df06564.png

 上面添加了一个过渡效果,放置后就会在设置的时间内完成要求,这个过渡后面会仔细说

8715062dc3b44079b1d2edde985ea5cd.png

 

 

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文目录3:大模型时代(2023+)

1 instruction tuning & in context learning 论文名称来源主要内容Finetuned Language Models Are Zero-Shot Learners2021 机器学习笔记&#xff1a;李宏毅ChatGPT Finetune VS Prompt_UQI-LIUWJ的博客-CSDN博客 早期做instruction tuning的work MetaICL: Learning to …

HTML 学习笔记(九)颜色值和长度单位

一、颜色 1.通过RGB值来设置颜色 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>table</title&…

⎣模型⎤Claude3——给奥特曼一点点压力!

微信公众号|人工智能技术派 作 者|hws Claude系列模型是由美国创业公司Anthropic基于transformer架构研发&#xff0c;该公司是一群在2021年OpenAI离职员工(包括前首席科学家Ilya Sutskever和Dario Amodei)创建的。Anthropic先前已发布Claude1和Claude2&#xff0c;效果相当不错…

【数据分享】2000-2022年全国1km分辨率的逐日PM10栅格数据

空气质量数据是在我们日常研究中经常使用的数据&#xff01;之前我们给大家分享了2000-2022年全国范围逐日的PM2.5栅格数据和2013-2022年全国范围逐日SO2栅格数据&#xff08;可查看之前的文章获悉详情&#xff09;。 本次我们给大家带来的是2000-2022年全国范围的逐日的PM10栅…

【论文阅读】关于智能合约的漏洞检测

两篇论文&#xff0c;都是关于智能合约漏洞检测的综述文章 [1]崔展齐,杨慧文,陈翔等.智能合约安全漏洞检测研究进展[J/OL].软件学报:1-33[2024-03-05].https://doi.org/10.13328/j.cnki.jos.007046. [2]王丹,黄松,王兴亚.以太坊智能合约测试研究综述[J].信息技术与信息化,2023(…

算法设计与分析(超详解!) 第一节 算法概述

1.算法的定义 算法的非形式化定义&#xff1a;算法是规则的有限集合&#xff0c;是为解决特定问题而规定的一系列操作。 可以理解为&#xff1a;算法&#xff08;algorithm&#xff09;是指在解决问题时&#xff0c;按照某种机械的步骤一定可以得到问题的结果&#xff08;有的…

【黑马程序员】STL实战--演讲比赛管理系统

文章目录 演讲比赛管理系统需求说明比赛规则程序功能 创建管理类功能描述创建演讲比赛管理类 菜单功能添加菜单成员函数声明菜单成员函数实现菜单功能测试 退出功能添加退出功能声明退出成员函数实现退出功能测试 演讲比赛功能功能分析创建选手类比赛成员属性添加初始化属性创建…

数据分析-Pandas最简单的方法画矩阵散点图

数据分析-Pandas直接画矩阵散点图 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表&…

有点炫酷有点diao的免费wordpress模板主题

这是一款经典的免费wordpress主题&#xff0c;被广泛应用于多个行业的网站。 https://www.wpniu.com/themes/189.html

vulhub中Weblogic < 10.3.6 ‘wls-wsat‘ XMLDecoder 反序列化漏洞(CVE-2017-10271)复现

Weblogic的WLS Security组件对外提供webservice服务&#xff0c;其中使用了XMLDecoder来解析用户传入的XML数据&#xff0c;在解析的过程中出现反序列化漏洞&#xff0c;导致可执行任意命令。 访问http://your-ip:7001/即可看到一个404页面&#xff0c;说明weblogic已成功启动 …

Kubernetes 安全秘籍:5 个你必须知道的知识点

Kubernetes 安全和身份验证是确保集群和应用安全的关键。今天将深入探讨 Service Account、身份验证和RBAC的关键概念和实践&#xff0c;帮助您构建安全可靠的应用。今天本文将着重于安全相关的内容&#xff0c;并提供更详细的示例和配置说明&#xff0c;帮助兄弟们更深入地理解…

机器人期刊:Science Robotics and IEEE Transactions

文章目录 1. Science Robotics (出版商 AAAS)2. IEEE Transactions on RoboticsReference1. Science Robotics (出版商 AAAS) https://www.science.org/journal/scirobotics 2. IEEE Transactions on Robotics

10kV/35kV并网分布式光伏系统-实现错峰有序用电

根据国家电网 Q/GDW1480-2015 《分布式电源接入电网技术规定》&#xff1a;分布式电源并网电压等级可根据各 并网点装机容量进行初步选择&#xff0c;推荐如下&#xff1a; • 8kW 及以下可接入 220V &#xff1b; • 8kW~400kW 可接入 380V &#xff1b; • 400kW~60…

【Appium问题】每次启动appium都会安装一次uiautomator

问题 每次启动appium&#xff0c;都需要安装一次uiautomator2比较麻烦 解决 在配置文件capabilities 中增加参数skipServerInstallationTrue

【C++专栏】C++入门 | 函数重载、引用、内联函数

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;C专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ C入门 | 函数重载、引用、内联函数 文章编号&#xff1a;C入门 / 02 文…

ORACLE RAC反应卡顿时enq: SV - contention和latch: row cache objects的分析

某客户数据库系统使用ORACLE RAC 11G版本&#xff0c;两个节点。在上午8点钟之后&#xff0c;业务开始大量进行时&#xff0c;出现严重的卡顿问题&#xff1b;在工程师分析后&#xff0c;发现当时出现了很多异常等待数据&#xff0c;如典型的enq: SV - contention 、enq: TX - …

基于单片机的老人防丢系统设计

目 录 摘 要 I Abstract II 引 言 3 1 系统总体架构 6 1.1方案设计与选择 6 1.2 系统架构设计 6 1.3 系统器件选择 7 2 系统硬件设计 9 2.1 单片机外围电路设计 9 2.2 LCD1602液晶显示电路设计 12 2.3 短信模块电路设计 14 2.4 GPS模块电路设计 14 2.5 电源与按键控制电路设计…

Mybaties-Plus saveBatch()、自定义批量插入、多线程批量插入性能测试和对比

一.背景 最近在做一个项目的时候&#xff0c;由于涉及到需要将一个系统的基础数据全量同步到另外一个系统中去&#xff0c;结果一看&#xff0c;基础数据有十几万条&#xff0c;作为小白的我&#xff0c;使用单元测试&#xff0c;写了一段代码&#xff0c;直接采用了MP(Mybati…

element---tree树形结构(返回的数据与官方的不一样)

项目中要用到属性结构数据&#xff0c;后端返回的数据不是官方默认的数据结构&#xff1a; <el-tree:data"treeData":filter-node-method"filterNode":props"defaultProps"node-click"handleNodeClick"></el-tree>这是文档…

SpringCloudGateway全局过滤器

文章目录 全局过滤器的作用自定义全局过滤器过滤器执行的顺序 上一篇 Gateway理论与实践 介绍的过滤器&#xff0c;网关提供了31种&#xff0c;但每一种过滤器的作用都是固定的。如果我们希望拦截请求&#xff0c;做自己的业务逻辑则没办法实现。 全局过滤器的作用 全局过滤器的…