前端的一些3D旋转效果和实例——table切换

首先,讲一下有关3D旋转的属性:

                transform用于设置变形,有以下参数

                1、translate(x,y)  2D的设置移动距离,x表示沿x轴的距离,y表示沿y轴的距离(y轴是向下为正)不写代表0

                    translateX(x)  translateY(y)    translateZ(z)

                2、translate3d(x,y,z)  3D的,

                3、scale(x,y)   元素缩放,是比例,省略y时,会默认y跟x相同

                    scale3d(x,y,z)  3d效果上的缩放

                    也可以单独设置,跟translate相同

                4、rotate(angle)  2d旋转,沿中心点顺时针旋转

                    rotate3d(x,y,z,angle)   3d旋转

                    rotateX(angle)    rotateY(angle)  rotateZ(angle)

                5、skew(x-angle,y-angle)    定义沿着 X 和 Y 轴的 2D 倾斜转换。

                    skewX(angle)   skewY(angle)

                变形相关

                1、设置变形中心点

                    transform-origin:right bottom;   表示绕着右下旋转,第一个代表水平方向,第二个代表垂直方向,也可以是具体的数字(50px,50px)

                2、3D效果

                    perspective 3D透视效果  作用于父级元素

                    transfrom-style:preserve-3d 3D嵌套效果

                    backface-visibility:    设置背面是否可见,为hidden时不可见,visible表示可见(默认值)

实例——table切换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* input {width: 100px;height: 100px;} *//* label{width: 100px;height: 100px;} */* {padding: 0;margin: 0;}body {height: 100vh;background: gray;}.container {width: 650px;height: 334px;margin: 150px auto;display: flex;justify-content: space-between;align-items: center;/* 设置视距 */perspective: 1500px;}.container .tab_body {width: 500px;height: 300px;background: olive;position: relative;/* 开启3D效果 */transform-style: preserve-3d;transform: rotateY(48deg);transform: rotateX(0px);/* 设置过度效果 */transition: transform 2s ease;}input {display: none;}.labels {height: 334px;display: flex;flex-direction: column;justify-content: space-between;}.labels label {width: 100px;height: 100px;display: block;cursor: pointer;text-align: center;line-height: 100px;}.labels label:hover {opacity: 0.8;}.labels label:nth-child(1) {background: khaki;}.labels label:nth-child(2) {background: peru;}.labels label:nth-child(3) {background: aliceblue;}.container .tab_body .tab_content {width: 520px;height: 300px;background: lawngreen;position: absolute;display: flex;flex-direction: column;justify-content: center;align-items: center;}.container .tab_body .tab_content:nth-child(2) {transform: translateZ(150px);background: peru;}.container .tab_body .tab_content:nth-child(1) {transform: translateY(-150px) rotateX(90deg);background: khaki;}.container .tab_body .tab_content:nth-child(3) {transform: translateY(150px) rotateX(-90deg);background: aliceblue;}#btn1:checked~.tab_body {transform: rotateX(-90deg);}#btn2:checked~.tab_body {transform: rotateX(0deg);}#btn3:checked~.tab_body {transform: rotateX(90deg);}</style>
</head><body><!-- label可以关联其他按钮,for中填的是想关联的id所以,想要改变选项框的样式,可以通过label的style来达到--><div class="container"><input type="radio" name="tabs" id="btn1"><input type="radio" name="tabs" id="btn2" checked><input type="radio" name="tabs" id="btn3"><div class="tab_body"><div class="tab_content"><h1>top</h1><p>APEX真的是框是神作</p></div><div class="tab_content"><h1>middle</h1><p>APEX真的是框是神作</p></div><div class="tab_content"><h1>bottom</h1><p>APEX真的是框是神作</p></div></div><div class="labels"><label for="btn1">top</label><label for="btn2">middle</label><label for="btn3">bottom</label></div></div>
</body></html>

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

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

相关文章

题解:力扣704/35/34

1.力扣704 : 二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。示例 1:输入: nums [-1,0,3,5,9,12], target 9 …

公司项目协作Git的使用

声明:因本人技术有限,这篇文章里面可能会有一些错误,希望发现的同仁能够指出,还望大家海涵。如果你觉得这个对你来说完全小儿科,你也可以无视,这篇教程只是给对git还不是很熟悉,不懂如何使用版本工具的同仁予以参考。 1、目的 由于我们的项目都是多人合作,在编写代码的…

2001-2021年上市公司制造业智能制造词频统计数据

2001-2021年上市公司制造业智能制造词频统计数据 1、时间&#xff1a;2001-2021年 2、来源&#xff1a;上市公司年报 3、指标&#xff1a;年份、股票代码、行业名称、行业代码、所属省份、所属城市、智能制造词频、智能制造占比(%) 4、范围&#xff1a;上市公司 5、样本量…

高精度算法讲解以及相关练习题

概念 在我们进行计算的过程中&#xff0c;经常会遇到几十位&#xff0c;甚至几百位的数字的计算问题&#xff0c;也有可能会遇到小数点后几十位&#xff0c;几百位的情况&#xff0c;而我们面对这样的情况下&#xff0c;long long和double的数据范围显然是不够使用的了。因此这…

MATLAB初学者入门(4)—— 高级特性和实用技巧

继续深入MATLAB优化模型求解&#xff0c;我们可以探索更多的高级特性和实用技巧&#xff0c;这有助于提高求解效率和结果的精确度。以下内容将涉及到一些高级配置选项、多目标优化和稳健性优化。 高级配置选项 在使用fmincon或其他MATLAB优化求解器时&#xff0c;你可以配置多…

playwright-断言

前言 playwright 提供了一个 expect方法 用于断言 断言 断言描述expect(locator).to_be_checked()Checkbox已勾选expect(locator).to_be_disabled()元素被禁用expect(locator).to_be_editable()元素可编辑expect(locator).to_be_empty()内容为空expect(locator).to_be_enable…

探索嵌入式系统:快速入门指南概览

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

OpenHarmony实战开发-性能测试工具SmartPerf Editor使用指导

概述 SmartPerf Editor是一款PC端桌面应用&#xff0c;通过监测、采集应用运行时FPS、CPU、GPU、Memory、Battery、Network等性能数据&#xff0c;帮助开发者了解应用的性能状况。SmartPerf Editor还集成了DrawingDoc功能&#xff0c;可录制Render Service绘制指令&#xff0c…

Android Perfetto 监控应用启动耗时

Perfetto 是一个 Google 开发的用于安卓系统性能监控和调试的工具&#xff0c;它旨在提供实时数据收集和可视化功能&#xff0c;帮助我们分析和优化应用程序的性能表现。Perfetto 可以捕获系统事件、CPU、内存、网络、GPU 等性能指标数据&#xff0c;并将其记录为轻量级的 Trac…

开发环境中的调试视图(IDEA)

当程序员写完一个代码时必然要运行这个代码&#xff0c;但是一个没有异常的代码却未必满足我们的要求&#xff0c;因此就要求程序员对已经写好的代码进行调试操作。在之前&#xff0c;如果我们要看某一个程序是否满足我们的需求&#xff0c;一般情况下会对程序运行的结果进行打…

茶饮门店本地生活抖音团购运营方案计划书

【干货资料持续更新&#xff0c;以防走丢】 茶饮门店本地生活抖音团购运营方案计划书 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 PPT可编辑80页&#xff08;完整资料包含以下内容&#xff09; 目录 抖音本地生活运营方案 1. 账号基础搭建与优化 - 门店账号…

练习题(2024/4/23)

1分发糖果 n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求&#xff0c;给这些孩子分发糖果&#xff1a; 每个孩子至少分配到 1 个糖果。相邻两个孩子评分更高的孩子会获得更多的糖果。 请你给每个孩子分发糖果&#xff0c;计算并返回…

Php-WebView 现代跨平台 GUI分享

GitHub :php-webview 一个用于 C/C 的小型跨平台 Web 视图库&#xff0c;用于构建现代跨平台 GUI。 该项目的目标是为最广泛使用的平台创建一个通用的 HTML5 UI 抽象层。 它支持双向 JavaScript 绑定&#xff08;从 C/C 调用 JavaScript 和从 JavaScript 调用 C/C&#xff09;。…

ClickHouse 高可用之副本

文章目录 ClickHouse 副本支持副本的引擎配置高可用副本副本应用1.副本表概述2.创建副本表3.写入模拟数据4.副本验证 扩展 —— 在 Zookeeper 中查看副本表信息 ClickHouse 副本 ClickHouse 通过副本机制&#xff0c;可以将数据拷贝存储在不同的节点上。这样&#xff0c;如果一…

Linux登录后的提示信息在哪里配置及配置方法

一、在哪配置 首先&#xff0c;用户的个性化提示信息可以通过编辑用户的.bashrc或.bash_profile文件来实现。这些文件通常位于用户的主目录下。你可以使用文本编辑器&#xff08;如vi、nano或gedit&#xff09;打开这些文件&#xff0c;并在文件的末尾添加你想要的个性化提示信…

我的世界服务器设计思路应该是什么样?

我的世界服务器设计思路可以从这4个方面展开&#xff1a;1.选择你喜欢的东西&#xff1b;2.认识你的极限&#xff1b;3.注入新鲜元素&#xff1b;4.让服务器变得享受且有回报。 1.选择你喜欢的东西 设计服务器的首要规则是创造一些你自己会积极享受玩的东西。没有人愿意花费宝…

在Spring boot中指定随机可用的端口

​ 正常情况下每个spring boot启动都有固定的端口&#xff0c;也就是8080&#xff0c;如果启动多个项目&#xff0c;很容易出现端口冲突&#xff0c;那么怎么解决这个问题呢&#xff1f; 解决方案1&#xff1a; random 随机端口 ​ 在spring boot中&#xff0c;可以通过${ran…

linux的一些实用操作

快捷键 强制停止 ctrlc强制停止或退出命令的输入 退出登出 ctrld强制退出用户登录或退出某些程序的专属页面&#xff08;如py&#xff09; ps&#xff1a;不能退出vi/vim 历史命令搜索 history可以查看历史命令&#xff0c;用来复制粘贴 在使用history之后&#xff0c;…

fnm:Rust开发的高效Node版本管理工具

简介 fnm 是一个基于 Rust 开发的 Node 版本管理工具&#xff0c;它的目标是提供一个快速、简单且可靠的方式来管理 Node.js 的不同版本。同时&#xff0c;它是跨平台的&#xff0c;支持 macOS、Linux、Windows。&#x1f680; Fast and simple Node.js version manager, buil…

pycharm-git 配置(1)

1.安装git2.pycharm 中配置git 插件 弹出Git版本号&#xff0c;即配置成功。3.创建本地仓库 VCS->VCS operations->create repository->设置本地目录 左下角可以看到git本地仓库git可以看到push,commit。 4.配置远方仓库&#xff0c;此时确保git上是有这个项目…