css3属性transform-origin属性讲解-程序员宅基地

技术标签: CSS  css3  

transform是CSS3里的变换属性,常用的有translate(平移)、rotate(旋转)、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值,其具有独立的语法,但值得注意的是,transform-origin必须配合transform来使用,这个从名字也可以看得出来,就是给transform设置的各种动作设置一个参考点。默认情况下,元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值,水平方向有left | center | right 三个值,垂直方向也有三个,分别是 top | center |bottom ,故一共有九个。

语法:

transform-origin:[ | | left | center① | right ] [ | | top | center② | bottom ]?

  • 默认值:50% 50%,效果等同于center center
  • 适用于:所有块级元素及某些内联元素

取值:

  • percentage:用百分比指定坐标值。可以为负值。
  • length:用长度值指定坐标值。可以为负值。
  • left:指定原点的横坐标为left
  • center①:指定原点的横坐标为center
  • right:指定原点的横坐标为right
  • top:指定原点的纵坐标为top
  • center②:指定原点的纵坐标为center
  • bottom:指定原点的纵坐标为bottom

说明:

  • 设置或检索对象以某个原点进行转换。
  • 该属性提供2个参数值。
  • 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
  • 如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
  • 对应的脚本特性为transformOrigin。

兼容性:

在这里插入图片描述

transform属性

默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处,如下图所示:
在这里插入图片描述
我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。

看上去transform-origin取值与background-position取值类似。为了方便记忆,可以把关键词和百分比值对比起来记:

  • top = top center = center top = 50% 0
  • right = right center = center right = 100%或(100% 50%)
  • bottom = bottom center = center bottom = 50% 100%
  • left = left center = center left = 0或(0 50%)
  • center = center center = 50%或(50% 50%)
  • top left = left top = 0 0
  • right top = top right = 100% 0
  • bottom right = right bottom = 100% 100%
  • bottom left = left bottom = 0 100%

为了让大家能一眼看明白,下面截图以transform中的旋转rotate()为例,并transform-origin取值不一样时的效果:
transform-origin取值为center(或center center或50% 或50% 50%):

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gRIISlqc-1633875768463)(/img/bVbjVGt)]

transform-origin取值为top(或top center或center top或50% 0):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VXZJGqCq-1633875768488)(/img/bVbjVG0)]

transform-origin取值为right(或right center 或center right 或 100% 或 100% 50%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vNFLde9B-1633875768492)(/img/bVbjVG1)]

transform-origin取值为bottom(或bottom center 或center bottom 或 50% 100%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uLU5WK9Z-1633875768495)(/img/bVbjVHj)]

transform-origin取值为left(或left center或center left或0或0 50%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J4M5KfQ2-1633875768498)(/img/bVbjVHF)]

transform-origin取值为top left(或left top或0 0):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NH5aiRck-1633875768500)(/img/bVbjVHI)]

transform-origin取值为right top(或top right或100% 0):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGT8AVJs-1633875768501)(/img/bVbjVHO)]

transform-origin取值为bottom right(或right bottom或100% 100%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gAvH0BZX-1633875768503)(/img/bVbjVHY)]

transform-origin取值为left bottom(或bottom left 或 0 100%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i5FsAQvW-1633875768504)(/img/bVbjVIb)]

参考文章:http://www.w3cplus.com/css3/transform-origin.html


实例:摆动的小球(钟摆效果)

在这里插入图片描述
从上图中可以看出,小球摆动效果运用了动画原理,以及transform-origin原理(很重要)。首先,先确定好球的变形中心点,然后在添加动画效果。
![原理图][3]

原理图:
在这里插入图片描述

 <div class="sphere"></div>
.sphere {
    
    width: 60px;
    height: 60px;
    background: #9485FD;
    border-radius: 100%;
    margin: 280px auto;
    background: radial-gradient(circle at top center, #c6bff6, #6959d8, #372a91);
    transform-origin: center -200px;
    animation: clock 4s infinite linear;
    position: relative;
}

.sphere::before {
    
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 200px;
    border-left: 1px #9485FD dashed;
}

@keyframes clock {
    
    0% {
    
        transform: rotate(0deg)
    }
    25% {
    
        transform: rotate(30deg)
    }
    50% {
    
        transform: rotate(0deg)
    }
    75% {
    
        transform: rotate(-30deg)
    }
    100% {
    
        transform: rotate(0deg)
    }
}

实例:2D圆周环绕动画

在这里插入图片描述

<div class="outer">
  <div class="horizontal-line"></div>
  <div class="vertical-line"></div>
  <div class="inner"></div>
</div>
.outer {
    
  /**定义子元素水平居中**/
  display:flex;
  justify-content:center;
  width: 100px;
  height: 100px;
  background-color: #6a5acd8c;
  position:relative;
}
/**竖向辅助线**/
.vertical-line{
    
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  height:100%;
  width:1px;
  background:#000;
}
/**横向辅助线**/
.horizontal-line{
    
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  height:1px;
  background:#000;
}
.inner {
    
  width:20px;
  height:20px;
  border-radius:50%;
  background-color: #6a5acdeb;
  transform-origin:50% 50px;/**50px为环绕半径*/
  animation:an-circle 3s ease-in-out infinite;
}
@keyframes an-circle  {
    
   to {
    
      transform: rotate(1turn);
   }
}

实例:2D加载动画

在这里插入图片描述

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>
.outer {
    
  /**定义子元素水平居中**/
  display:flex;
  justify-content:center;
  width: 100px;
  height: 100px;
  background-color: #6a5acd8c;
  position:relative;
}
.inner {
    
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background-color: #6a5acdeb;
  transform-origin: 50% 50px;
  animation:an-circle 3s ease-in-out infinite;
}
.inner:nth-child(2){
    
  height:18px;
  width:18px;
  animation-delay:.2s;
}
.inner:nth-child(3){
    
  height:16px;
  width:16px;
  animation-delay:.4s;
}
.inner:nth-child(4){
    
  height:14px;
  width:14px;
  animation-delay:.6s;
}
@keyframes an-circle{
    
  to{
    
    transform:rotate(1turn);
  }
}

参考

CSS3之transform-origin详解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36699230/article/details/120693688

智能推荐

[latex] LaTeX基础_杂谈勾股定理 张三-程序员宅基地

文章浏览阅读611次。LaTeX入门1.开始第一篇LaTeX论文\documentclass[UTF8]{ctexart} \title{杂谈勾股定理} \author{张三} \date{\today}\begin{document} \maketitle %生成title、author、date \begin{abstract} %生成摘要 ..._杂谈勾股定理 张三

脉冲成型滤波器(一)_脉冲成型 作用-程序员宅基地

文章浏览阅读6.9k次,点赞5次,收藏54次。源代码%%%%%%%%%%%%%%%%%%%% 脉冲成型滤波器 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 对一个具有多频率的信号进行过滤,并观察滤波后信号的时域波形和频波形clc;clear all;close all;%%%%%%%%%%%%% 待滤波的信号 %%%%%%%%%%%%%%%%%f1=500;f2=2000; %待滤波信号的频谱Fs = 10000; %采样频率L=10000; %采样点数Ts=1/Fs; %采样周期_脉冲成型 作用

ubuntu下安装nginx,支持https_ubuntu nginx1.13.2-程序员宅基地

文章浏览阅读1k次。ubunut配置nginx,支持https_ubuntu nginx1.13.2

Android 图片文件读取-程序员宅基地

文章浏览阅读2.7w次,点赞16次,收藏71次。介绍图片文件读取所涉及到的各项技术点

Android记录8--简单自定义Launcher实现-程序员宅基地

文章浏览阅读702次,点赞27次,收藏17次。Android学习PDF+架构视频+面试文档+源码笔记【Android开发核心知识点笔记】【Android思维脑图(技能树)】【Android核心高级技术PDF文档,BAT大厂面试真题解析】【Android高级架构视频学习资源】[外链图片转存中…(img-WXOAEI3r-1710828063701)]【Android思维脑图(技能树)】[外链图片转存中…(img-Txwu0xza-1710828063701)]【Android核心高级技术PDF文档,BAT大厂面试真题解析】

一个16进制的数占多少字节?(半个字节)_一个数字半个字节-程序员宅基地

文章浏览阅读3.6w次,点赞28次,收藏56次。1个字节是8位,二进制8位:xxxxxxxx 范围从00000000-11111111,表示0到255。一位16进制数(用二进制表示是xxxx)最多只表示到15(即对应16进制的F),要表示到255,就还需要第二位。所以1个字节=2个16进制字符,一个16进制位=0.5个字节。参考文章:一个16进制的数占多少字节?比如19..._一个数字半个字节

随便推点

温柔的风穿堂过-程序员宅基地

文章浏览阅读818次。林依人和她的名字一点都不配。她一点都不依人。她是个胖子,我认识她的时候她就已经是个胖子了。那年我十五岁,上高一。凭着男生特有的小聪明和初中不错的底子,考上了市里最好的高中,和刚刚认识的一群满身臭汗或阳光或猥琐的男生在学校招摇过市,嘻哈打闹,按照成绩选位置,于是坐在教室的最后一排,上课的时候和几个跟我差不多兴趣的男生打赌英语老师的胸是C还是D。通往幸福路上唯一的障碍就是班主任。他经常会冷

Android/Java中的常用签名算法_android 支持的签名算法-程序员宅基地

文章浏览阅读6.2k次。Android/Java中常用的签名算法实现:(包括BASE64、MD5、SHA1、HMAC_SHA1、AES、RSA等)package com.helloWorld;import java.security.KeyFactory;import java.security.MessageDigest;import java.security.PrivateKey;import j_android 支持的签名算法

LNMP搭建(CentOS 6.3+Nginx 1.2.0+PHP 5.3.15(fpm)+ MySQL 5.5.35)-程序员宅基地

文章浏览阅读234次。Nginx(“engine x”) 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过三年了。Igor 将源代码以类BSD许可证的形式发布。系统环境:# cat /etc/redhat-releaseCentOS ..._info - device 0 unit 0: sample buffer has 0 samples (0%)., slow or stopped c

msf生成payload并注入到可执行程序exe中_msf注入进程-程序员宅基地

文章浏览阅读4.5k次,点赞2次,收藏13次。msfconsole下的generate与msfvomen命令实际是不同环境下的同一个命令,其功能基本相同,这里我们要学习的重点是使用-k -x 选项将payload注入到可以执行文件exe中,这项技能在实战中后渗透测试的可持久化中经常会被用到。_msf注入进程

HTML的布局_html 布局-程序员宅基地

文章浏览阅读920次。重中之重需求:Html默认采用文档流布局方式:浏览器会自上而下,从左到右依次显示标签元素,遇到块级元素则独占一行,行级元素同行共存。两个块级元素如何在同一行显示?办法1:使用display inline 或inline-block ----》打破默认的文档流布局方式。 问题: 办法2:使用浮动技术。float: none 默认的文档流 left左浮动 right右浮动原始素材<!DO..._html 布局

eclipse中jsp插入背景图片_eclipsejsp背景图片-程序员宅基地

文章浏览阅读1.9w次,点赞8次,收藏11次。在项目中不停尝试,变换路径,图片的地址,却一直插入不进可以变颜色,图片显示不出路径问题,把图片放在_eclipsejsp背景图片