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,一经查实,立即删除!

相关文章

小程序添加悬浮在线客服源码

部分代码片段&#xff1a; wxml: <button plaintrueopen-type"share" class"ymym"> <image modeaspectFill src../../static/fx.png classymimage></image> </button> 源码获取方式&#xff1a;搜一搜 万能工具箱合集 然后点击 资…

论文目录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&…

如何设计自动化测试框架

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 关于测试框架的好处&#xff0c;比如快速回归提高测试效率&…

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

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

XPath表达式学习

XPath表达式学习是写UI自动化关键的一步 学习渠道而言w3school肯定是最好的教程 获取控件XPath路径的工具 名称平台介绍uiautomatorviewerAndorid只能直接生成xpah,需要自己拼凑Appium InspectorAndorid iOS只能在mac上用app-insecptorAndorid iOSmacaca的生态工具 常见用法 …

【数据分享】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实战--演讲比赛管理系统

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

iOS小技能:设置app语言(跟随系统和特定语言)

文章目录 引言I 读取本地化字符串的方式1.1 设置当前语言工具类(封装读取本地化字符串)1.2 获取系统语言环境1.3 跟随系统1.4 根据特定bundle读取本地化字符串II 设置app语言2.1 设置语言2.2 语言切换界面2.3 重新加载所有界面以更新语言2.4 资源文件III 案例:登录界面切换中…

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

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

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

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

在Ubuntu 20.04中设置开机自启动脚本

这里写目录标题 1. 在Ubuntu 20.04中设置开机自启动脚本2. 取消上面的命令 1. 在Ubuntu 20.04中设置开机自启动脚本 在Ubuntu 20.04中设置开机自启动脚本&#xff0c;您可以使用systemd服务来实现。下面是如何将您的脚本设置为开机自启动的步骤&#xff1a; 创建systemd服务文…

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;帮助兄弟们更深入地理解…

Vue的table组件合并行方法

/*** param {Array} data - 原始数据集合* param {string} addParamer - 这个是自定义的参数&#xff0c;向每个对象中添加一个参数 按照这个参数的个数进行合并* param {} args - 剩余参数 这个是合并规则 &#xff0c;比如按照时间合并 那就传入对象中的时间参数date&#xf…

String StringBuffer StringBuilder StringJoiner区别

String、StringBuffer、StringBuilder和StringJoiner在Java中都是处理字符串的工具&#xff0c;但它们各自有不同的特点和适用场景。 String: 是不可变的字符序列&#xff0c;一旦创建就不能更改其内容。每次对String进行修改时&#xff0c;实际上会生成一个新的String对象。这…

机器人期刊: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…