当前位置： 首页 > news >正文

WEB前端3D变换效果以及如何应用js代码

news 2026/5/19 4:32:31

WEB前端DAY8

变换效果3d

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{/* 视距：设置距离xy轴构成的平面有多少像素距离 */perspective: 500px;}div{/* 设置变化效果为3d */transform-style: preserve-3d;width: 100px;height: 100px;border: 1px solid red;/* margin: 100px; *//* translateXYZ分别让标签在xyz轴上发生位移 *//* transform: translateZ(100px); *//*  三个参数分别是xyz轴上的位移*//* transform: translate3d(200px,100px,500px); *//* transform: rotateX(45deg); *//* transform: rotateY(45deg); *//* transform: rotateZ(90deg); */}</style></head><body><div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div>img{width: 100px;height: 100px;position: absolute;transition: 3s;}body{perspective: 500px;}div{margin:200px;width: 100px;height: 100px;border: 1px solid red;transform-style: preserve-3d;position: relative;}.container:hover>img:first-child{top: -100px;transform-origin: bottom;transform: rotateX(-90deg);}.container:hover>img:nth-child(2){top: 100px;transform-origin: top;transform: rotateX(90deg);}.container:hover>img:nth-child(3){left: -100px;transform-origin: right;transform:rotateY(90deg)}.container:hover>img:nth-child(4){left: 100px;transform-origin: left;transform: rotateY(-90deg);}.container:hover>img:last-child{transform: translateZ(100px);}.container:hover{transform: rotate3d(1,1,1,45deg);}.container{transition: 3s;}</style></head><body><div class="container"><img src="./img/11.webp" alt=""><img src="./img/22.jpeg" alt=""><img src="./img/33.jpeg" alt=""><img src="./img/44.jpeg" alt=""><img src="./img/55.webp" alt=""><img src="./img/66.jpeg" alt=""></div></body>
</html>

过渡属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span,div{width: 100px;height: 100px;border: 1px solid red;transition:2s width linear 1000ms;}span:hover,div:hover{width: 200px;height: 200px;background-color: black;}span{display: inline-block;}</style></head><body><div></div><span></span></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span,div{width: 100px;height: 100px;border: 1px solid red;transition:2s width linear 1000ms;}span:hover,div:hover{width: 200px;height: 200px;background-color: black;}span{display: inline-block;}</style></head><body><div></div><span></span></body>
</html>

动画

@keyframe ：动画名称{from{}to{}
}

JavaScript

首先JavaScript是一个动态的解释型编程语言。

所谓动态就是指，代码在运行时变量的数据类型可以发生变化。（静态就想类似c、java、go这种语言他们需要创建变量时就确定变量的数据类型，并且不可随意更改）

所谓的解释型语言，是指代码运行时不需要生成任何可执行文件，代码通过解释器转化为二进制数据交给cpu运行，并且解释型语言通常是一行一行运行的。（编译型是生成可执行文件，通过运行可执行文件达到执行代码的目的）

如何在html引入js代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"><!-- js的第三种书写方式外链式 --><script src="./js/new_file.js"></script></head><body><!-- 第二种js的代码书写方式 行内样式 --><!-- <button οnclick="alert('hello world')">按钮</button> --><!-- 书写JS代码的第一种方式 页面样式 --><script></script></body>
</html>

三种弹框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"></head><body><!-- 第一种弹框警告框，向用户展示信息 --><!-- <button οnclick="alert('hello world')">按钮</button> --><script>// <!-- 第二种弹框，确认框可以根据用户的选择获取返回值 -->// flag = confirm("你是困困的粉丝吗")// if(flag){// 	console.log("太好了，我也是")// }else{// 	console.log("滚粗，小黑子！");// }// 第三种弹框prompt 第一个参数是提示信息 第二个参数是默认值// 谨慎使用 xss攻击经常攻击的目标// str = prompt("请输入你的年龄","18");// console.log(str)</script></body>
</html>

如何创建变量

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"></head><body><script>// c中如何创建变量// int 变量名 要么是 float string 。。。// js中有三种创建的方式// 第一种无声明 创建的变量他事全局的// function fun(){// 	name = "string"// }// fun()// console.log(name)// 第二种使用var关键字创建变量 // console.log(name)// var name = "string"// name = "string2"// console.log(name)// var具有声明提升作用 上面的代码等价于下面的代码// var name="string"// console.log(name)// name = "string2"// console.log(name)// 第三种使用let创建变量 块级别// function fun(){// 	if(0 == 0){// 		var age = "123"// 	}// 	console.log(age)// }// fun()// console.log(age)// var 和 let的区别// 1.let的最小作用域是块级别 出了块 变量就无法访问// var的变量最小作用域是函数级别 也就说var即使在代码块中创建只要在函数中都可以正常访问// 2.var可以重复的重建变量 let不可以// 3.var具备声明提升的效果 let不可以// let a = 1// console.log(a)// let a = 2// console.log(a)// let a = 3// console.log(a)</script></body>
</html>

变量的命名规范

  • 数字大小写字母以及下划线，$。
  • 变量命名首字母不能是数字
  • 不能使用关键字或者保留字来命名变量
  • 变量命名时应具备具体含义，浙江有效提高代码的可读性
  • 官方推荐小驼峰命名法或者下划线命名法
  • 创建常量的时候要每一个字母都大写，并且使用const关键字

数据类型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"></head><body><script>//c中数据类型大概有这些int short char long float longlong double unshort...//js中基本数据类型 Number(int float double)、 Boolean、String、undefined、NaN、// 引用类型：Array数组类型 object对象类型let a = 100 / "a"console.log(a)</script></body>
</html>

相关文章：

WEB前端3D变换效果以及如何应用js代码

WEB前端DAY8 变换效果3d <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>body{/* 视距&#xff1a;设置距离xy轴构成的平面有多少像素距离 */perspective: 500px;}div{/* 设置变化效果为3d *…...

编程日记 2024/1/23 3:46:03

Linux中的新建用户、切换用户

目录 一、Linux系统中有哪些用户 二、新建普通用户 三、root账号与普通账号的切换 一、Linux系统中有哪些用户 1.root 超级管理员&#xff08;不受权限约束&#xff09; 2.其他用户 普通用户&#xff08;受到权限约束&#xff09; 二、新建普通用户 创建新用户 sudo user…...

编程日记 2024/1/23 3:41:59

Vue3使用

1、列表实现 <el-table :data"tableData" border style"width: 100%" selection-change"handleSelectionChange" :header-cell-style"{text-align:center}"><el-table-column type"selection" width"55"…...

编程日记 2024/1/23 3:36:54

BindingException: Invalid bound statement (not found): xxMapper.deleteBatchIds

org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): xxMapper.deleteBatchIds 在使用mybatisplus的deleteBatchIds方法的时候&#xff0c;发生如下异常 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): …...

编程日记 2024/1/23 3:27:45

开源图床LightPicture搭建本地图片管理系统并实现无公网IP远程访问

文章目录 1.前言2. Lightpicture网站搭建2.1. Lightpicture下载和安装2.2. Lightpicture网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的手机越来越先进&#xff0c;功能也越来越多&#xff0c;而手机…...

编程日记 2024/1/23 3:25:44

黑马苍穹外卖学习Day10

文章目录 Spring Task介绍cron表达式入门案例 订单状态定时处理需求分析代码开发功能测试 WebSocket介绍入门案例 来单提醒需求分析代码开发 客户催单需求分析代码开发 Spring Task 介绍 cron表达式 入门案例 订单状态定时处理 需求分析 代码开发 新建一个task包里面编写代码…...

编程日记 2024/1/23 3:23:42

[数据结构 - C++] 红黑树RBTree

文章目录 1、前言2、红黑树的概念3、红黑树的性质4、红黑树节点的定义5、红黑树的插入Insert6、红黑树的验证7、红黑树与AVL树的比较附录&#xff1a; 1、前言 我们在学习了二叉搜索树后&#xff0c;在它的基础上又学习了AVL树&#xff0c;知道了AVL树是靠平衡因子来调节左右高…...

编程日记 2024/1/23 3:21:40

《WebKit 技术内幕》学习之十（2）： 插件与JavaScript扩展

2　Chromium PPAPI插件 2.1　原理 插件其实是一种统称&#xff0c;表示一些动态库&#xff0c;这些动态库根据定义的一些标准接口可以跟浏览器进行交互&#xff0c;至于这个标准接口是什么都可以&#xff0c;重要的是大家都遵循它们&#xff0c;NPAPI接口标准只是其中的一种&a…...

编程日记 2024/1/23 3:20:39

【头歌-数据分析与实践-python】数据分析与实践-python——python基础

注意 &#xff1a; 本文档仅供参考使用&#xff0c;本章节程序绝大多数程序面向对象输出&#xff0c;一旦测试用例改变&#xff0c;会导致无法通过&#xff0c;请悉知 ! ! ! 请勿盲目使用 数据分析与实践-python——python基础 数据分析与实践-python——python基础 数据分析与…...

编程日记 2024/1/23 3:17:36

【数据库原理】（37）Web与数据库

随着网络的高速发展和网络服务的日趋完善&#xff0c;网络上的信息量呈几何级数增长。为了有效地组织、存储、管理和使用网上的信息&#xff0c;数据库技术被广泛地应用于网络领域。特别是在Internet上&#xff0c;已建立了数以万计的网站&#xff0c;其中大中型网站的后台大多…...

编程日记 2024/1/23 3:07:28

STM32 TIM输出比较、PWM波形

单片机学习&#xff01; 目录 一、输出比较简介 二、PWM简介 三、输出比较通道 3.1通用定时器的输出比较部分电路 3.2高级定时器的输出比较部分电路 四、输出模式控制器 五、PWM基本结构 六、PWM参数计算 总结 前言 文章讲述STM32定时器的输出比较功能&#xff0c;它主…...

编程日记 2024/1/23 3:04:25

React16源码: React中的updateClassComponent的源码实现

ClassComponent 的更新 1 &#xff09; 概述 在 react 中 class component&#xff0c;是一个非常重要的角色它承担了 react 中 更新整个应用的API setStateforceUpdate 在react当中&#xff0c;只有更新了state之后&#xff0c;整个应用才会重新进行渲染在 class component 中…...

编程日记 2024/1/23 3:03:24

Mybatis 动态SQL(set)

我们先用XML的方式实现 : 把 id 为 13 的那一行的 username 改为 ip 创建一个接口 UserInfo2Mapper ,然后在接口中声明该方法 package com.example.mybatisdemo.mapper; import com.example.mybatisdemo.model.UserInfo; import org.apache.ibatis.annotations.*; import jav…...

编程日记 2024/1/23 2:59:21

Ubuntu18.04在线镜像仓库配置

在线镜像仓库 1、查操作系统版本 rootubuntu:~# lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 18.04.5 LTS Release: 18.04 Codename: bionic 2、原文件备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 3、查…...

编程日记 2024/1/23 2:58:20

多数据源配置H2 Mysql

H2->Mysql数据迁移 需求背景环境说明实现过程配置调整原配置修改配置 代码调整新增DatasourceConfig配置类使用secondaryJdbcTemplate 需求背景 最近有一需求&#xff0c;原本项目中由于某些原因使用嵌入式数据库H2&#xff0c;鉴于嵌入式数据库可靠性以及不方便管理等因素…...

编程日记 2024/1/23 2:57:19

【ASP.NET Core 基础知识】--路由和请求处理--路由概念（一）

在Web应用中&#xff0c;路由是一个至关重要的概念&#xff0c;它负责将用户的请求映射到相应的处理程序&#xff0c;以确保正确的页面或资源被呈现给用户。通过将用户请求与适当的处理程序关联起来&#xff0c;使得应用能够以有序和可维护的方式响应用户的操作。 一、ASP.NET…...

编程日记 2024/1/23 2:55:16

【Unity】RayMarching体积云理论学习

RayMarching 体积云 RayMarching 是一种处理体积物体的方法 RayMarching 体积云的制作是基于屏幕后处理 屏幕空间重建世界坐标 目的是把屏幕坐标的每一个像素点转化成Unity世界坐标&#xff0c;可以得到射线的方向 如何在需要渲染的物体或者场景中使用RayMarching&#xff…...

编程日记 2024/1/23 2:54:15

物联网与智慧城市的无界未来：如何打破传统束缚，开启智能生活新篇章

目录 一、物联网&#xff1a;连接万物的技术革命 1、物联网的发展历程 2、物联网的核心技术 二、智慧城市&#xff1a;未来城市的蓝图与挑战 1、智慧城市的蓝图 2、智慧城市建设面临的挑战 3、应对挑战的措施 三、物联网与智慧城市的融合&#xff1a;打破传统束缚&…...

编程日记 2024/1/23 2:52:13

nodejs下载安装

一、node下载安装 官网下载 官网 根据自己电脑系统选择合适的版本进行下载&#xff0c;我这里选择window 64 位 下载完点击安装 打开cmd查看安装 此处说明下&#xff1a;新版的Node.js已自带npm&#xff0c;安装Node.js时会一起安装&#xff0c;npm的作用就是对Node.js…...

编程日记 2024/1/23 2:51:12

从零学Java - Lambda表达式

Lambda 表达式 文章目录 Lambda 表达式什么是 Lambda 表达式?怎么使用?1 基本语法:2 箭头符号:3 代码演示:4 注意事项 函数式接口1 什么是函数式接口2 常见函数式接口 方法引用(了解)1 什么是方法引用 什么是 Lambda 表达式? Lambda表达式&#xff1a;特殊的匿名内部类&…...

编程日记 2024/1/23 2:45:05

Armv8原子操作调试：LDXR/STXR指令对与独占监视器

1. 理解LDXR/STXR指令对的核心机制在Armv8-A架构中&#xff0c;LDXR&#xff08;Load Exclusive Register&#xff09;和STXR&#xff08;Store Exclusive Register&#xff09;是一对用于实现原子操作的指令。这对指令的工作机制可以类比为"拿号排队"系统&#xff1…...

编程新知 2026/5/19 4:10:41

软考高级之系统架构师之系统安全性和保密性设计（二）

认证 PKI/CA 参考PKI/CA体系介绍。 Kerberos Kerberos是一种网络认证协议&#xff0c;其设计目标是通过密钥系统为客户机/服务器应用程序提供强大的认证服务。该认证过程的实现不依赖于主机操作系统的认证&#xff0c;无需基于主机地址的信任&#xff0c;不要求网络上所有主…...

编程新知 2026/5/19 3:42:40

从电压模到COT：DC-DC降压转换器控制模式演进与选型指南

1. DC-DC降压转换器控制模式概述 第一次接触电源设计时&#xff0c;我被各种控制模式搞得晕头转向。电压模、电流模、迟滞控制、COT...这些专业名词就像天书一样。后来在实际项目中摸爬滚打多年&#xff0c;才发现理解这些控制模式的关键在于抓住它们的"性格特点"——…...

编程新知 2026/5/19 2:53:57

如何通过Magisk实现Android系统无痕定制：开发者的终极实战指南

如何通过Magisk实现Android系统无痕定制&#xff1a;开发者的终极实战指南 【免费下载链接】Magisk The Magic Mask for Android 项目地址: https://gitcode.com/GitHub_Trending/ma/Magisk Magisk作为一款革命性的Android系统定制框架&#xff0c;以其独特的"无系…...

编程新知 2026/5/19 2:45:27

[2026降本增效实战] 制造业生产成本核算如何提升准确性？基于实在Agent的端到端解决方案

在2026年的工业4.0深水区&#xff0c;制造业的竞争早已从单纯的产能比拼转向了极致的成本精度博弈。 传统的成本核算模式正面临前所未有的挑战&#xff1a;数据颗粒度过粗、跨系统断点频发、人工干预导致的误差难以溯源。 随着大模型技术与超自动化技术的深度融合&#xff0c;智…...

编程新知 2026/5/19 1:29:44

抠图软件推荐哪个好用？我用了这么多工具后，终于找到最顺手的

最近工作中需要频繁处理证件照和商品图&#xff0c;我试遍了市面上十几款抠图软件&#xff0c;从专业的Photoshop到各种在线工具&#xff0c;最后发现一款微信小程序彻底改变了我的工作效率。今天就来分享一下我的真实使用体验。为什么要专门用抠图工具&#xff1f;你可能会想&…...

编程新知 2026/5/19 1:17:31

独立开发者如何利用 Taotoken 模型广场低成本试错选型

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者如何利用 Taotoken 模型广场低成本试错选型 对于资源有限的独立开发者或小型团队而言&#xff0c;在产品开发初期选择合…...

编程新知 2026/5/19 0:56:44

手把手教你用ADS 2023设计433MHz低噪放大器（附ATF54143模型下载）

手把手教你用ADS 2023设计433MHz低噪放大器&#xff08;附ATF54143模型下载&#xff09; 在射频电路设计中&#xff0c;低噪声放大器&#xff08;LNA&#xff09;是接收机前端的关键部件&#xff0c;其性能直接影响整个系统的灵敏度。433MHz频段广泛应用于物联网、遥控器和工业…...

编程新知 2026/5/18 23:55:19

网安工具系列python系列【仅供参考】：Python实战：利用fofa API高效搜索网络资产

Python实战：利用fofa API高效搜索网络资产 Python实战：利用fofa API高效搜索网络资产 1. 从零开始：为什么你需要一个自动化的资产搜索工具？ 2. 动手前的准备：你的fofa账户和Python环境 2.1 获取你的fofa API凭证 2.2 搭建Python脚本环境 3. 核心代码拆解：一行行理解搜索脚…...

编程新知 2026/5/18 22:37:22

别再死记硬背了！用SPSS搞定系统聚类法，手把手教你从数据录入到谱系图解读

SPSS系统聚类法实战&#xff1a;从数据导入到商业解读的全流程指南 当你的数学建模作业截止日期临近&#xff0c;或者老板突然要求对市场调研数据进行分类分析时&#xff0c;系统聚类法往往是救命稻草。但传统教材中复杂的距离矩阵计算和迭代过程&#xff0c;常让初学者望而生畏…...

编程新知 2026/5/18 21:58:45