鼠标移动到手机上面，手机围绕一点自动旋转出其他手机

最新推荐文章于 2024-08-18 22:48:32 发布
最新推荐文章于 2024-08-18 22:48:32 发布
阅读量236 收藏
点赞数 2
文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77335001/article/details/137240173
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				margin-left:600px;
				margin-top: 400px;
				position: relative;
			}
			li{
				list-style-type: none;
				position: absolute;
				left: 0;
				top: 0;
				transform-origin: left top;
				transition: all 1s;
			}
			img{
				width: 200px;
				height: 280px;
			}
			ul:hover li:first-child{
				transform: rotate(60deg);
			}
			ul:hover li:nth-child(2){
				transform: rotate(120deg);
			}
			ul:hover li:nth-child(3){
				transform: rotate(180deg);
			}
			ul:hover li:nth-child(4){
				transform: rotate(240deg);
			}
			ul:hover li:nth-child(5){
				transform: rotate(300deg);
			}
			ul:hover li:nth-child(6){
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<ul>
			<li><img src="img/index6.png" alt="" /></li>
			<li><img src="img/index7.png" alt="" /></li>
			<li><img src="img/index8.png" alt="" /></li>
			<li><img src="img/index6.png" alt="" /></li>
			<li><img src="img/index7.png" alt="" /></li>
			<li><img src="img/index8.png" alt="" /></li>
		</ul>
	</body>
</html>

执心幻恋
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UE 鼠标操作，定点旋转 平移
03-23
利用Input Blueprint，可以绑定鼠标的水平和垂直移动到旋转角度，从而实现实时的定点旋转。 2. **平移**：平移是将物体在三维空间中沿指定方向移动。UE中，同样可以通过修改Transform组件的Location属性来实现物体...
js根据鼠标移动速度背景图片自动旋转的方法
12-09
本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
C++实现鼠标左键控制摄像机旋转模型，六视图切换，模型自动旋转
01-12
在本项目中，我们主要探讨的是如何利用C++和Qt框架来实现对3D模型的交互操作，特别是通过鼠标左键来控制摄像机旋转，实现六视图切换以及模型的自动旋转功能。以下是对这些技术点的详细说明： 首先，C++是用于编写此...
围绕任意中心点通过鼠标旋转图片
08-31
在WPF（Windows Presentation Foundation）应用开发中，有时我们需要实现图片的交互式旋转功能，比如让用户能够通过鼠标拖动来围绕一个自定义的中心点旋转图片。本文将深入探讨如何在WPF中实现这一功能。 首先，...
Unity3d C# 实现纯鼠标平滑控制场景摄像头(相机)实现自由旋转、移动和围绕节点移动旋转等功能源码工程
09-29
建议先看说明：https://blog.csdn.net/qq_33789001/article/details/120551521 Unity3d C# 实现纯鼠标平滑控制场景摄像头(相机)实现自由旋转、移动和围绕节点移动旋转等功能源码工程
CSS的重绘和重排是什么？
沐爸的博客
08-12 1090
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
CSS相关修改样式、伪类样式
2301_80034711的博客
08-15 982
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。值用空格隔开，分别设置x，y方向的相对位置。2.background-image：标签背景图片，使用url（）函数，引入文件地址。使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 185
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
css-浮动
m0_73882020的博客
08-16 367
不再保留原先的位置。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 675
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
探索tailwindcss多主题切换
xuefeng11111的博客
08-18 360
探索tailwind+css变量切换主题
HTML及CSS面试题4
2301_78675670的博客
08-14 1176
一些常见的HTML+CSS面试题及参考答案，对于有面试需求的小伙伴们来说，是一份比较不错的例题参考
CSS使用touch-action属性控制设备的触摸行为
读心悦
08-15 400
CSS 属性是一个用于设置触摸操作（如触摸滑动、双击缩放等）在特定元素上的默认行为如何被浏览器处理的属性。这个属性主要用于优化移动端和触摸设备的交互体验，减少不必要的触摸事件处理或冲突，特别是在处理滚动、缩放等复杂交互时。
CSS的:first-child与:last-child伪类：精准定位首尾子元素
最新发布
2401_85743969的博客
08-18 323
伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。和伪类则分别用于选择父元素的第一个和最后一个子元素。
html+css+js网页设计 移动端 京东6个页面
qq_42431718的博客
08-14 260
html+css+js网页设计 移动端 京东6个页面 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
CSS基础
ZZPIGKK的博客
08-12 433
2.一般将CSS文件单独写，HTML文件要引入该文件。3.1.1 外部CSS文件，Class选择器的写法v。3.Class选择器在HTML的标签中的使用。6.选择器优先级排序，越精准优先级越高。7.CSS内部嵌套到HTML中的样式。4.ID选择器，一般ID不重复的。5.ID选择器的写法。
CSS——动画（animation）
Fan_web的博客
08-15 977
本文主要分享了CSS中的过渡、动画、变形、旋转、缩放等的样式的语法内容。下一篇将分享到CSS的less知识。
【playwright篇】CSS 选择器 详细用法
qadnkz的专栏
08-14 949
在 Playwright 中，CSS 选择器是非常重要的，因为它们用于定位页面上的元素。CSS 选择器允许您通过 HTML 元素的属性、类名、ID 等来定位元素。以下是 CSS 选择器的一些基本用法和示例。
CSS知识点详解：display+float
qq_62859013的博客
08-18 360
diaplay和float知识点详解
unity鼠标拖动物体在2D平面围绕一个点旋转
06-02
好的，我来为你解答这个问题。 要实现鼠标拖动物体在2D平面围绕一个点旋转，你可以按照以下步骤进行操作： 1. 在Unity中创建一个2D场景，并将需要旋转的物体放置在场景中。 2. 在需要围绕的点位置上创建一个空物体，作为旋转的中心点。 3. 在需要旋转的物体上添加一个脚本，用于控制鼠标拖动旋转的行为。 4. 在脚本中，使用Input.GetAxis来获取鼠标在水平和垂直方向上的移动距离。 5. 根据鼠标移动的距离，计算出旋转的角度，并将物体绕中心点旋转到该角度。 下面是一个示例代码，你可以参考一下： ```csharp public class RotateObject : MonoBehaviour { public Transform rotateCenter; // 旋转中心点 public float rotateSpeed = 5f; // 旋转速度 private Vector3 previousMousePosition; void OnMouseDown() { previousMousePosition = Input.mousePosition; } void OnMouseDrag() { Vector3 currentMousePosition = Input.mousePosition; float rotateAngle = (currentMousePosition.x - previousMousePosition.x) * rotateSpeed; transform.RotateAround(rotateCenter.position, Vector3.forward, rotateAngle); previousMousePosition = currentMousePosition; } } ``` 在上面的代码中，OnMouseDown和OnMouseDrag函数分别用于获取鼠标按下和拖动的事件。在OnMouseDrag函数中，我们通过计算鼠标移动的距离，来计算旋转的角度，并使用transform.RotateAround函数来实现绕中心点旋转的效果。 希望这个回答能够帮到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值