首页 > 其他分享 >CSS:transform-origin

CSS:transform-origin

时间:2024-10-10 11:21:33浏览次数:8  
标签:origin const center bottom 50% transform CSS

transform-origin:设置旋转元素的基点位置 ,即旋转轴的位置。而transform主要是平移和旋转的功能。

使用transform-origin属性必须先使用transform属性(旋转)

transform-origin: x-axis y-axis z-axis;

默认值为:50% 50% 0

x-axis的值可为left、center、right、lenght、%,left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%

y-axis的值为top、center、bottom、lenght、%,top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;

如果只取一个值,表示垂直方向值不变。

如果一个矩形,要想底边中点绕着圆心转动,实现步骤如下:

position: absolute;
bottom: 50%; /*距离底部50%*/
left: 50%; /*距离左边50%,此时只有translateX向左移动50%(即translate(-50%),此时旋转轴才和圆心重合)*/

此时矩形的左下角在50% 50%的地方,如下图所示:

transform-origin: 50% 100%;

表示旋转轴的位置在底边中点的位置:

即旋转轴的位置如下图所示:

再通过transform属性,将矩形向左平移50%,即(-50%)

transform: translateX(-50%);

如下图所示:

最后用transform属性的rotate旋转角度即可实现绕旋转中(即圆心)旋转

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟学堂(edu.jb51.net)</title>
<style>
#div1
{
    position: relative;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    /*添加阴影*/
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.second
{
    width: 30px;
    height: 50px;
    background-color: red;
    position: absolute;
    bottom: 50%;
    left: 50%;
    border: 1px solid black;
    transform-origin:50% 100%;

    border-radius: 5px;
}
</style>
</head>
<body>
<div id="div1">
<div class="second" ></div>
</div>
    <script>
  function updateClock() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    const hourDeg = (hours % 12 + minutes / 60) * 30;
    const minuteDeg = (minutes + seconds / 60) * 6;
    const secondDeg = seconds * 6;

    document.querySelector('.second').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;

   
  }

  setInterval(updateClock, 1000);
  //updateClock(); // 立即更新一次,避免延迟

 
</script>
</body>
</html>

效果如下:

 

标签:origin,const,center,bottom,50%,transform,CSS
From: https://www.cnblogs.com/zwh0910/p/18455970

相关文章

  • CSS规范写法
    CSS规范手册一 CSS书写顺序1.1 **{/*显示属性*/displaypositionfloatclearcursor… /*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align… /*文字*/colorfontcontent/*边框背景。为什么要......
  • 面试 - 补充 - HTML/CSS(可能问到的题目展示)
    如何理解HTML语义化?默认情况下,哪些元素是块级元素,哪些是内联元素?盒模型宽度如何计算?margin纵向重叠的问题margin负值的问题BFC理解和应用float布局的问题flex画色子absolute和relative依据什么定位?居中对齐有哪些实现方式line-height继承(有坑)rem是什么如何实现响应式......
  • 【AI大模型】深入Transformer架构:编码器部分的实现与解析(下)
      目录......
  • transformers和bert实现微博情感分类模型提升
    关于深度实战社区我们是一个深度学习领域的独立工作室。团队成员有:中科大硕士、纽约大学硕士、浙江大学硕士、华东理工博士等,曾在腾讯、百度、德勤等担任算法工程师/产品经理。全网20多万+粉丝,拥有2篇国家级人工智能发明专利。社区特色:深度实战算法创新获取全部完整项目......
  • 深度学习No module named ‘torchvision.transforms.functional_tensor‘问题解决
    问题在进行深度学习训练过程中出现ModuleNotFoundError:Nomodulenamed'torchvision.transforms.functional_tensor'报错,多方查阅资料后得到了解决方案。关于我的环境:CUDA==12.1torch==2.4.1GPU==4090D原先进行深度学习用的CUDA11.3,torch1.2.1,但是在训练时出现nvrtc......
  • html-css背景属性
    background的常见背景属性background-color:#ff99ff;设置元素的背景颜色background-image:url(图片地址);将图像设置为背景。background-repeat:no-repeat;设置背景图片是否重复及如何重复,默认平铺满。-no-repeat不要平铺;-repeat-x横向平铺;-repeat-y纵向平铺。......
  • 如何使用Transformer模型处理金融文本数据?
    《DeepLearningforFinance》这本书主要介绍了如何使用深度学习技术,特别是机器学习和强化学习方法来处理金融数据,但并没有详细讨论Transformer模型在金融文本数据处理中的应用。不过,基于深度学习的一般知识以及Transformer模型的广泛用途,我们可以构建一个关于如何利用Tran......
  • css表格表单
    1.项目符号样式list-style-type无序列表:nonedisccirclesquare(无,黑点,圆圈,方格)有序列表:decimaldecimal-leading-zero,lower-alpha,upper-alpha,lower_roman,upper-roman<!DOCTYPEhtml><html> <head> <title>ListStyleType</title> <stylety......
  • 第五章 CSS盒模型
    5.1盒模型的定义    Web页面上大部分的元素(特别是块状元素)都可以看作是一个盒子,W3C组织建议把所有网页上的对象都放在一个盒子(box)中,设计者可以通过创建定义来控制这个盒子的各种属性,这些对象包括段落、列表、标题、图片及层。    盒子的结构可以看作一个......
  • javascript学习——CSS 操作总结
    CSS操作CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本章介绍如何通过JavaScript操作CSS。HTML元素的style属性操作CSS样式最简单的方法,就是......