css3动画，设置动画基点

我会带着你远行 2022-08-04 13:52 244阅读 0赞

@-webkit-keyframes swing \{  
    50% \{  
    -webkit-transform: rotate(10deg);  
    transform: rotate(10deg);  
  \}  
    100% \{  
    -webkit-transform: rotate(-10deg);  
    transform: rotate(-10deg);  
  \}  
\}  
  
  
@keyframes swing \{  
    50% \{  
    -webkit-transform: rotate(10deg);  
    -ms-transform: rotate(10deg);  
    transform: rotate(10deg);  
  \}  
   100% \{  
    -webkit-transform: rotate(-10deg);  
    -ms-transform: rotate(-10deg);  
    transform: rotate(-10deg);  
  \}  
\}

调用动画

.swing \{  
  -webkit-transform-origin: center center;  
  -ms-transform-origin: center center;  
  transform-origin: center center;  
  -webkit-animation-name: swing;  
  animation-name: swing;

\}

transform-origin用来设置旋转元素的基点，top left right bottom %，

详情查看h [ttp://www.w3school.com.cn/cssref/pr\_transform-origin.asp][ttp_www.w3school.com.cn_cssref_pr_transform-origin.asp]

效果如下图，瓶子左右摆动，以中心为基点左右摆动。

![20150831120625688][]

[ttp_www.w3school.com.cn_cssref_pr_transform-origin.asp]: http://www.w3school.com.cn/cssref/pr_transform-origin.asp
[20150831120625688]: /images/20220731/d55f095516c94868914a3447a7decc6c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 代码示例 )

文章目录一、CSS3 动画属性 1、CSS3 常见动画属性简介 2、代码示例 - CSS3 常见动画属性使用二、CSS3 动画属

素颜马尾好姑娘i/ 2023年10月14日 16:24/ 0 赞/ 54 阅读

相关【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

文章目录一、CSS3 动画简介二、CSS3 动画实现步骤三、动画定义四、代码示例一、CSS3 动画简介

我不是女神ヾ/ 2023年10月14日 15:47/ 0 赞/ 167 阅读

相关 css3动画实现帧动画

pic { height:90px; width:65; background-position: -40px -44px;

- 日理万妓/ 2023年01月17日 09:21/ 0 赞/ 175 阅读

相关 css3 动画 vs js 动画

> 之前被问到过，css3 动画与 js 动画孰优孰劣，脑袋的第一反应就是性能上肯定 css3 动画会好很多，但别人说不对，我就在想，不对？难道还有别的原因吗？答案是肯定的。先

矫情吗；*/ 2022年10月01日 07:43/ 0 赞/ 279 阅读

相关 css动画设置运动轨迹,css3动画之圆形运动轨迹

![c4468b3f4df77e96b0a416fa2a870fba.png][] css3中通过@keyframes定义动画，animation设置动画属性，从而实现动画效

ゝ一世哀愁。/ 2022年09月02日 14:58/ 0 赞/ 762 阅读

相关 css3动画，设置动画基点

@-webkit-keyframes swing \{ 50% \{ -webkit-transform: rotate(10deg);

我会带着你远行/ 2022年08月04日 13:52/ 0 赞/ 245 阅读

相关 css3动画：animation城市动画

效果图： ![这里写图片描述][SouthEast] html代码： <!DOCTYPE html> <html lang="en"> <he

逃离我推掉我的手/ 2022年06月14日 08:40/ 0 赞/ 385 阅读

相关 CSS3动画

最新更新时间：2019年1月10日19:34:50 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：动画 360°循环旋转

浅浅的花香味﹌/ 2022年05月17日 02:04/ 1 赞/ 352 阅读

相关 CSS3动画

CSS3动画 CSS3动画可以分为过渡动画变形动画（平移，放大，旋转）和自定义动画（帧动画）。变形动画一般和过渡动画或者自定义动画搭配使用。过渡动画

一时失言乱红尘/ 2022年04月11日 11:11/ 0 赞/ 363 阅读

相关 CSS3动画

CSS3动画 > 网页的动态效果实现动画效果的四种方式 1. 动态图片 2. Flash 3. CSS动画相关属性 4. JavaScript 实现

Dear 丶/ 2021年11月16日 07:38/ 0 赞/ 843 阅读