- 综合排序
- 最热优先
- 最新优先
- 来自专栏Unity3D
【Unity3D】鼠标拖拽物体实现任意角度自旋转
Unity3d鼠标拖拽物体实现任意角度自旋转 主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向（x轴）移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向 （y轴）移动增量 通过勾股定理获取拖拽长度，长度越长旋转越快 在project setting--Input 可以设置 代码分享 UnityEngine; System.Collections; public tempSpeed = 0; } } return tempSpeed; } void Update() { // this.transform.Rotate(new Vector3( axisY, axisX, 0) * Rigid(), Space.World); //这个是是按照之前方向一直慢速旋转 if (! Input.GetMouseButton(0)) { onDrag = false; this.transform.Rotate(new Vector3(axisY, axisX, 0)
5.4K30发布于 2020-03-11 - 来自专栏娱乐心理测试
小程序的拖拽、缩放和旋转手势
twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 // 计算角度，旋转 )*180/Math.PI if (Math.abs(perAngle - curAngle) > 1) { that.setData({ msg: '旋转
1.7K40发布于 2018-06-08 开源：16点位，6特性，拖拽旋转库（DDR）
一句话总结超丝滑拖拽旋转库，16点位，带边界检测，圆角控制，动态位置指示器，拖拽旋转无抖动，动态箭头，完全开源拖拽库，坐标精准，旋转后，坐标始终为左上角那个点的坐标前言目前拖拖拽拽的项目非常流行比如低代码 而这些离不开前端底层的拖拽框架基于canvas实现的拖拽框架，非常丝滑，自由度高，但是做一些复杂业务难度较大所以使用div+css+js实现了一款16点拖拽旋转的库没有耐心看文章的同学，可以直接访问：https ://ddr.mx2d.cn/特性一：16点位我们来看看16个点分别是哪些上下左右四条边算4个点，可调整大小4个顶点可以拖拽，可同时调整两条边的大小顶点边缘有4个点，可拖拽旋转内置4个点可调整圆角大小（ 默认不开启）特性二：旋转无抖动无论是高速拖拽，还是旋转后拖拽，都没有抖动，非常丝滑。 如果没有做这个功能，大致情况如下吧结语由于时间比较紧张，所以没有封装成npm的包且仅有vue3版本，直接把这个库当成一个组件用就好了
7910编辑于 2026-05-06- 来自专栏小孟开发笔记
微信小程序单指拖拽和双指缩放旋转
小程序单指拖拽和双指操作是一个比较常用的功能，效果如下图 实现这三个功能，主要用三个触摸事件touchstart、touchmove、touchend <view style="height: 100vh translateY: 0, // 位移y坐标 单位px distance: 0, // 双指接触点距离 scale: 1, // 缩放倍数 rotate: 0, // <em>旋转</em>角度 : [] // 起始点touch数组 }, }) 单指<em>拖拽</em> 单指<em>拖拽</em>比较简单，只需要记录移动的点坐标，然后减去起始点坐标，就可以求出针对页面的移动距离 touchstart touchStart(e == 2) { // 单指<em>拖拽</em> this.setData({ translateX: onePageX - startMove.x, translateY: == 2这个判断的原因是防止图片跳动，因为如果你两个手指触摸，然后离开一个手指，我是禁止<em>拖拽</em>的，只有双指都离开后再次触摸才能单指<em>拖拽</em> 双指<em>旋转</em> 双指<em>旋转</em>的原理是根据三角函数求出起始点的角度，然后再求出移动坐标的角度
3.9K31编辑于 2023-03-07 - 来自专栏RDの秘密基地
CSS3旋转实例学习（附3D旋转实例）
我们都有在网页上见过一些交互性的效果，比如用鼠标滑向图标或是按钮的时候，图标会自动旋转一周，这就是CSS3旋转效果。 本文主要侧重讲解CSS3的平面旋转（2D）方法和立体旋转（3D）方法。 CSS3实现3D旋转 用CSS3制作3D旋转图像，效果很漂亮，3D旋转的特别之处就是支持阴影旋转和兼容响应式网页设计，使得整体场景非常有感觉。 先看一个简单的3D旋转效果例子： 正面：鼠标移上去就开始旋转 ? 旋转中：这是旋转至背面的效果，以旋转并带半透明渐变的方式显示。 ? 背面：旋转后，为图像添加一些文字介绍元素，充实这个元素。 ? 3D立方体旋转效果 ?
4.4K21发布于 2020-10-26 - 来自专栏前端基础
3d 旋转（摘抄）
var(--s) / 2); display: block; width: var(--s); height: var(--s); transform-style: preserve-3d position: absolute; width: 100%; height: 100%; --sq: conic-gradient( from 270deg at calc(100% / 3) calc(100% / 3), #fff 90deg, transparent 0 ); background: var(--sq) calc(var(--s) / 3) calc (var(--s) / 3) / 100% 100%, var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 3) calc(100% / 3), var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 9) calc(100% / 9), var(--sq) calc(100%
1.1K10发布于 2020-04-24 - 来自专栏技术社区
3D旋转照片
html+css写的3D旋转图 1、html代码 <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ZXH3D旋转图</title> <link type="text 100% 100%; position: absolute; margin-left: 42%; margin-top: 22%; -webkit-transform-style:preserve-<em>3</em>d 100px; height:100px; position: absolute; left:50px; top:30px; -webkit-transform-style:preserve-<em>3</em>d 002.png) no-repeat 0 0; -webkit-transform:rotateX(180deg) translateZ(50px); } .minbox li:nth-child(<em>3</em>)
1.2K30编辑于 2022-06-16 - 来自专栏韩曙亮的移动开发专栏
【CSS3】CSS3 2D 转换 - rotate 旋转 ④ ( 旋转案例 )
一、需求分析 给定一个 盒子模型 , 鼠标移动上去后 , 通过旋转的方式 , 出现一个 新的 盒子模型 布局 , 旋转上去后 , 新的布局会覆盖住之前的 盒子模型 ; 实现原理如下 : 在绘制的时候 , 一个是 空的 盒子模型 , 在 空盒子模型 中 , 绘制了一个 子盒子 , 子盒子 是 有实际元素的 盒子模型 ; 有 实际内容 的 子盒子模型 , 初始状态就 沿着 左下角为中心点 , 顺时针旋转了 相关的属性 : 旋转中心点 , 默认的初始角度 , 旋转的动画持续时间 ; /* 设置以左下角为中心旋转 */ transform-origin: left "IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3 一半时的样式 : 旋转完成后的样式 :
1.1K20编辑于 2023-10-11 - 来自专栏山海散人技术
3D拖拽相册的实现
head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>3D 拖拽相册</title> <meta name="Keywords" content="关键字,关键字"> <meta name="description" content .pic{width:120px;height:180px;margin:200px auto 0;position:relative;transform-style:preserve-3d
<img src="img/<em>3</em>.
85430发布于 2021-03-03 - </body> <script> var radius = 180; //牵涉到半径 var dtr = Math.PI/180;//旋转的快慢 +mcList[j].cz*ca; var rx2=rx1*cb+rz1*sb; var ry2=ry1; var rz2=rx1*(-sb)+rz1*cb; var rx3= rx2*cc+ry2*(-sc); var ry3=rx2*sc+ry2*cc; var rz3=rz2; mcList[j].cx=rx3; mcList[j].cy=ry3; mcList[j].cz=rz3; per=d/(d+rz3); mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);来自专栏鲸鱼动画
3D旋转标签云
tagbox .img img{ width: 70px; } #tagbox a,#tagbox .img img{ position: absolute; padding: 3px yellow" href="#">云电脑
2.2K20发布于 2020-09-21
css3旋转木马效果
margin: 150px auto; position: relative; transform-style: preserve-3d transform: rotateY(60deg) translateZ(300px); } section div:nth-child(3)
Vue3文件拖拽上传
="drag">
未选择文件/文件夹
支持拖拽到此区域上传
CSS3实现图片放大旋转
点：
css3动画
transition
/*旋转动画*/
@-webkit-keyframes rotation{
from {-webkit-transform: rotate( rotateY(360deg);
transform: scale(1.51,1.51) rotate(360deg);
}
.ta_c{text-align: center;
width: 99%;
}
/*旋转动画 img/1.jpg" width="25%" class="img" />
<img src="img/<em>3</em>.
translate3d绕轴旋转
solid brown; margin-top: 50px; margin-left: 50px; transition: all 1s; } .cbox1:hover { transform: rotate3d solid brown; margin-top: 50px; margin-left: 50px; transition: all 1s; } .Cbox1:hover { transform: rotate3d (1, 1, 0, 55deg); /****x,y,z,旋转角度***/ } </style> </head> <body>
沿着x轴旋转:两个都是绕x轴旋转55度第一个不加(perspective /imags/ggg.jpg">
沿着Y轴旋转:两个都是绕Y轴旋转55度第一个不加(perspective)透视--------------------------沿着Z 轴旋转:两个都是绕Z轴旋转55度第一个不加(perspective)透视
leecode刷题（3）-- 旋转数组
leecode刷题（3）-- 旋转数组 旋转数组 给定一个数组，将数组中的元素向右移动 K 个位置，其中 K 是非负数。 示例： 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4] 解释: 向右旋转 1 步: [7,1,2,3,4,5,6] 向右旋转 2 步: [6,7,1,2,3,4,5 ] 向右旋转 3 步: [5,6,7,1,2,3,4] 说明： 尽可能想出更多的解决方案，至少有三种不同的方法可以解决这个问题。 ---- 个人理解： 数组的旋转，即把一个数组最开始的若干个元素搬到数组的末尾。 举个栗子 每旋转一次的执行过程 1) 先将最后一个保存到临时变量 1 2 3 4 5 6 7 8 [8] --- 临时变量 2）位移 _ 1 2 3 4 5 6 7 [8
【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )
一、3D 旋转 rotate3d 3D 旋转 指的是 在 三维空间坐标系 中 , 绕 X 轴 , Y 轴 , Z 轴 进行旋转 , 同时还可以绕 自定义轴 进行旋转 ; 2D 旋转只能 以 某个点为中心进行旋转 , 3D 旋转可以绕某个轴进行旋转 ; 1、rotate3d 语法 CSS3 中 3D 旋转 语法 : 绕 X 轴旋转 : 沿着 X 轴 正方向 旋转 45 度 ; transform: rotateX : rotateZ(45deg) 沿自定义轴旋转 : 沿着自定义的轴 旋转 deg 角度 ; transform: rotate3d(x, y, z, deg) 2、rotate3d 自定义轴旋转 下面的 rotate3d 函数 , 接受四个参数 , 前 3 个参数是用来指定 自定义旋转的轴 , 0, 0, 1, 说明这里只使用了 Z 轴作为旋转的轴 , 下面的代码的实际作用是 绕 Z 轴旋转 360 度 ; div { transform: rotate3d(0, 0, 1, 360deg); } 3、元素旋转方向 - 左手准则 元素旋转时进行 方向判断 , 按照左手准则进行判断 ; 左手准则
Vue3实现图片滚轮缩放和拖拽
<template>
js拖拽-javascript拖拽缩放示例
一、两种主流实现方式方式 1：使用 HTML5 原生 Drag & Drop API（推荐用于跨容器拖拽）✅ 标准化，浏览器原生支持✅ 支持文件拖入、跨 iframe 拖拽❌ 事件模型复杂，样式控制受限 ❌ 移动端兼容性差方式 2：基于 mousedown mousemove mouseup 的自定义拖拽（推荐用于 UI 组件内部拖拽）✅ 完全可控，性能高✅ 可精细控制动画、边界、吸附等效果✅ 兼容性极佳 “抓”在点击点 在 document 上监听 mousemove/mouseup 避免鼠标移出元素后失效三、高级拖拽：可拖拽、可冻结、可编辑、可排序如我早期另一篇文章-用JS/HTML/CSS 构建可拖拽 ❌ 问题 3：拖拽超出容器边界解决：在 mousemove 中加入边界检测： 展开 磁吸、弹簧） 结合 requestAnimationFrame + 自定义逻辑记住核心公式： 拖拽位置 = 鼠标当前位置 - 初始偏移量掌握这一原则，你就能构建任何拖拽交互。
拖拽RecyclerView
挥别第三方库：原生ItemTouchHelper掌控RecyclerView拖拽与侧滑原始译文参考：开发技术前线（原作者：PaulBurke/译者：objectlife）如果你还在使用残破累赘的第三方库 （比如早期的SwipeToDismiss）或者深陷于手写GestureDetector和onInterceptTouchEvent的泥沼来处理列表的侧滑删除和长按拖拽，那你需要立刻停下。 不仅仅是手势的剥离，它直接掌控了拖拽中悬浮视图的z-轴阴影（elevation抬升）、回位动画轨迹（dropsettling）甚至支持自定义约束方向。
js拖拽
开发了那么久，对于js实现拖拽多少都写过，用于实际项目却没有。 先看一下之前写的： 如果鼠标慢慢移动，拖拽是没有任何问题的，如果速度快了，那么鼠标和元素就会分离。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号