2D-设置转换中心点

CSS3动画示例：使用transform和transition实现旋转效果

原创已于 2024-04-28 19:18:14 修改 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2024-04-28 19:17:50 首次发布

本文介绍了一个简单的HTML页面，展示了如何使用CSS3的`transform`和`transition`属性创建一个div元素在鼠标悬停时旋转360度的动画效果，重点讲解了`transform-origin`的用法。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width: 200px;

height: 200px;

background-color: pink;

margin: 100px auto;

transition: all 1s;

/* 可以跟方位名词 */

/* transform-origin: left bottom; */

/* 默认的是50% 50% 等价于center center */

/* 可以是px像素 */

transform-origin: 50px 50px;

}

div:hover {

transform: rotate(360deg);

}

</style>

</head>

<body>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序猫..

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

cocos2d-lua基础

bandaris的博客

04-14

2152

cocos2d-lua 一.核心概念场景：scene，在特定时间、特定地点发生的事件的集合，可以看作是一个容器，包含各种游戏的元素层：图层（一个场景可以有多个层，一个场景至少有一个层）精灵：sprite，在屏幕上移动的对象，它能够被控制。通常是可移动、能被控制的图片动画等。 Ui组件：界面上的元素导演：director，游戏的总控，是一个共享的单例对象，可以在代码中的任何地方调用节点**类**：node类，凡是可以显示的都是节点（节点是cocos2dx中最为重要的根类，被广泛的继承）二.坐标

2d-3d坐标转换

liudiudiu

10-04

6163

对于常规相机，SLAM里使用针孔相机模型　简而言之，一个空间点[x,y,z]和它在图像中的像素坐标[u,v,d] (d 指深度数据) 的对应关系是这样的： u=x⋅fxz+cx,u=x⋅f_xz+cx,u=x⋅fxz+cx, v=y⋅fyz+cy,v=y⋅f_yz+cy,v=y⋅fyz+cy, d=z⋅s,d=z⋅s,d=z⋅s, 其中，fx,fy指相机在x,y两个轴上的焦距，cx,cy指...

参与评论您还未登录，请先登录后发表或查看评论

CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）

weixin_70320000的博客

02-16

3094

CSS3中设置元素转换中心点

qq_51735681的博客

03-18

3497

首先给一个div盒子作为研究对象，然后给盒子定义属性，代码如下： div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; } 备注： margin: 100px auto; 这句代码是让盒子居中显示以上代码确定的旋转中心是100p

学习 transform 属性和常用方式

小小的前端

06-02

2498

transform-origin 属性作用是修改元素的中心点。transform属性的变换都是基于中心点来进行变换的，中心点修改，元素变换后的位置就会改变。可以使用一个，两个或三个值来指定，中心点偏移量。第一个值指定X轴偏移量，参数类型是css 长度单位、百分比或 left, center, right, top, bottom关键字。第二个值指定y轴偏移量，参数类型是css 长度单位、百分比或 left, center, right, top, bottom关键字。第三个值指定z轴偏移量，参

怎么在html中设置原点间距,笔记：css3 transition 宽度以中心为原点向两边伸长

weixin_39869378的博客

06-15

255

核心代码(CSS)：transition:1s allcubic-bezier(.46,1,.23,1.52);hoverSlideout Demo.container { text-align: center; }.bar {width: 100px;display: inline-block;transition: 1s all cubic-bezier(.46, 1, .23, 1.52...

css3 transition 实现div以中心为原点以圆形向四周扩展

百慕大

09-06

1022

效果：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hoverSlideout Demo</title> <style type="text/css"> .container { width: 400px; height: 100px; .

【Cocos2d-x】期末复习（更新完全版）

qq_46030018的博客

12-11

6365

1. 明确在cocos2d-x程序中输出提示信息的方法，字符串什么类型？ Log () 字符串类型:C语言字符准类型。 char*类型 2. 菜单项有哪些类型，他们之间是什么关系？文本菜单项 MenultemLabel 包含 MenuItemAltasFont 和 MenultemFont 精灵菜单项 MenultemSprite 和图片菜单项 MenultemImage 是两者是父子关系开关菜单项MenultemToggle，包含两个菜单项一个开一个关 ...

PoseFormer：基于视频的2D-to-3D单人姿态估计

Airs-Gao的博客

08-06

4806

Transformer架构已经成为自然语言处理中的首选模型，现在正被引入到计算机视觉任务中，例如图像分类、对象检测和语义分割。然而，在人体姿态估计领域，卷积架构仍然占主导地位。在这项工作中，我们呈现PoseFormer一种纯粹基于Transformer的方法，用于视频中的3D人体姿势估计，不涉及卷积架构。受视觉Transformer最新发展的启发，我们设计了一个时空Transformer结构，以全面建模每帧内的人体关节关系以及帧间的时间相关性，然后输出中心帧的精确三维人体姿态。

unity-base-2d-angry-birds-clone

04-18

Rigidbody2D是2D物理系统的中心，它定义了游戏对象的物理属性，如质量、速度、加速度等。在这个项目中，Rigidbody2D被用于鸟的抛射运动和碰撞响应。 6. **碰撞检测**： Unity的Collider2D和Collider组件用于检测...

CSS3动画 transform、transition、animation的介绍

qq_44820039的博客

04-25

448

animation 复合属性，检索或设置对象所应用的动画特效，是CSS3中一个具有颠覆性的特征，通过设置多个点来控制图片的动画。 1.定义通过 keyframes来定义，keyframe 就是关键帧语法： @keyframes name{ 0%{开始状态} 100%{结束状态}} } @keyframes name{ from{开始状态} to{结束状态}} } 两种...

用hover元素，scale中心点放大效果

lili1122212的博客

12-25

7440

在做页面练习时，需要把图片从中心点放大，一开始是设置img的宽、高，hover以后再设置一个大于原img的宽、高，这样做虽然效果也出来了，只是不是中心点放大，是从左上角放大，达不到想要的效果。在百度上找了一下都没有适合的方法，问了老师，他的方法是在hover里使用vertical-align: middle; 还是没有什么用，在试了几次后，我把vertical-align: midd

css旋转动画定义中心,css动画(transition/transform/animation)

weixin_42593130的博客

08-04

1797

在开发中，一个好的用户操作界面，总会夹杂着一些动画。css用对少的代码，来给用户最佳的体验感，下面我总结了一些css动画属性的使用方法及用例代码供大家参考，在不对的地方，希望大佬直接拍砖评论。1 transition(过渡)使用语法:transition: property duration timing-function delay;参数：(1) property(设置过渡效果的css属性名称)...

CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...

热门推荐

熊诗言的博客

11-11

2万+

无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。旋转、扭曲、缩放、位移、矩阵、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transition-timi...

css3 transition 实现div宽度以中心为原点向两边伸长

weixin_43990624的博客

05-17

3872

需要对.inner设置居中，对齐设置display:inline-block;对父元素设置text-align：center；或者margin：0 auto；cubic-bezier(.46, 1, .23, 1.52) 为贝塞尔曲线函数

笔记：css3 transition 实现div宽度以中心为原点向两边伸长

qq_39108466的博客

08-28

1万+

参考原文章（问答）： css3 transition width在变长的时候能以中心为原点，向两边伸长吗？我在项目中用来作为导航菜单的鼠标悬停交互 : 核心代码(CSS)：.container { text-align: center; } .bar { width: 100px; display: inline-block;

CSS 变换 transform(位置 translate,缩放 scale,旋转 rotate,中心点 origin)

卋舉

10-12

2814

位置 transform:translate(100px); 宽高(缩放 scale) transform:scale(1.5,1.5); 旋转(旋转 rotate) transform:rotate(45deg); 控制中心点(原点 origin) transform-origin:150px 100px; 动画 (transition) transition:all .5s ease-in 0s; <!DOCTYPE html> <html lang="zh-CN"> <h

transition属性实现div点击拉伸，再点击收回效果

baidu_33163851的博客

09-28

6525

html> html lang="en"> head> meta charset="UTF-8"> title>004title> style> div { width: 80px; height: 50px; background-color: #90FF8E; transition: width 4s; /* 改变宽度，时间4

旋转中心点案例（transform）

imsopoor的博客

02-26

574

效果图 html <div> </div> css div { width: 100px; height: 100px; margin: 100px auto; border: 1px solid #000; overflow: hidden; } div:hover::after { transform