html旋转围绕的中心点,CSS3实现围绕任何点来旋转(二)

前天写过一篇文章 "CSS3实现围绕任何点来旋转",主要是实现围绕点来旋转.

今天我们继续用另外一种方式实现.

我们先来看代码

HTML

☺

CSS.smile {

margin: 100 px auto;

width: 80 px;

height: 80 px;

font - size: 80 px;

animation: action 10 s linear infinite;

}

@keyframes action {

from {

transform: rotate(0 deg) translate(100 px) rotate(0 deg);

}

to {

transform: rotate(360 deg) translate(100 px) rotate(-360 deg);

}

其实从代码量来说,比之前的简化了不少. HTML使用的只有一个标签,也只使用了一个动画.

我们主要还是从动画入手, 在这里transform里面我们加入了三种动画,第一种和第三保证的是笑脸能够旋转起来,保证笑脸是正脸.

如果不需要正脸,可以去掉一个.

中间那个动画是平移动画,也就是在选择的同时,笑脸做平移运动.这样就形成了围绕旋转运动.

要确定这个围绕点,得控制笑脸的位置,我这里的代码就直接是用margin来控制的.如果需要设置不同的点,可以使用定位来控制位置.这样灵活一点.(代码大家就可以自己敲一下,试一下效果)

html旋转围绕的中心点,CSS3实现围绕任何点来旋转(二) | 睿客网相关推荐

html3d旋转发光立方体,纯css3实现的3D立体动态旋转立方体特效
CSS3 3D立方体多边形动画特效 - 代码笔记 *{ margin:0 auto; padding:0; } @keyframes rotate{ 0%{ transform:rotateX(0de ...
fabricjs 围绕对象中心点旋转
先吐槽一下现在网上搜索的东西,莆田货先不说,牛鬼蛇神,各显神通,要么是千篇一律.答非所问,要么是无人善后的半吊子回答,再要么是上个世纪的古董玩意儿,这样让我们这些面向百度编程的人很难办啊! 围绕左上角 ...
向量学习2：图形围绕自己中心旋转、围绕图形外或内任意点为中心旋转
在前边博文"向量学习1"中,介绍了在篮球游戏中,防守者逼近防守投篮者,如何用向量,计算逼近的方向以及前进的距离.方法可用篮球投篮.足球射门和射击的子弹轨迹等等方面.在pygame游 ...
openGL绘制带纹理太阳、地球、月亮，并且地球自转并且围绕太阳旋转。月亮自转也会围绕地球旋转
openGL系列文章目录前言使用openGL绘制太阳.地球.月亮,太阳自转,地球自转并且围绕太阳旋转.月亮自转也会围绕地球旋转,其实月亮也会围绕太阳旋转的. 一.效果还是有不满意的地方: 1.没 ...
css3星球围绕轨迹开场动画特效带流星效果
css3星球围绕轨迹开场动画特效带流星效果 .star 控制流星效果,角度速度可自定义 <!DOCTYPE html> <html class="two"> ...
css3 3d旋转兼容模式下,CSS3 3D 转换
3D Transforms CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法:rotateX() rotateY() 点击下面的元素,来查看 2D 转 ...
html图片旋转3种方式—— CSS3 transform
html图片旋转有3中方式:ie 滤镜,CSS3 transform,HTML5 canvas rotate 参考文章:网页中图片旋转的几种实现方式 CSS3 transform css3 的tra ...
css的中心点,指定变形中心点CSS3
指定变形中心点 /*基本设置*/ body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund: ...
沿着x轴旋转的html例子,CSS3旋转实例学习（附3D旋转实例）
我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用,transform主要包括以下几种:旋 ...

html旋转围绕的中心点,CSS3实现围绕任何点来旋转(二) | 睿客网

html旋转围绕的中心点,CSS3实现围绕任何点来旋转(二) | 睿客网相关推荐

最新文章

热门文章