首先是  transform 属性:

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

加上对应属性则可得到3D透视效果下的形态

本次以圆形(或图片)元素为例:

1. 父元素添加属性

#app{
    width:200px;
    height:200px;
    position: absolute;
    transform:  rotateZ(90deg) rotateX(0deg) rotateY(70deg); /**添加透视3d属性/
   /* rotateZ(90deg) 使元素沿Z轴旋转90度 可以简单理解为放平*/
}
 
rotateZ 60deg

rotateX它可以让一个元素围绕横坐标(水平轴)旋转,

rotateY(70deg) 让元素绕y轴旋转

注意:如果单独使用某个属性与同时使用某个属性效果会不同

2.子元素使用animation定义动画

img{
    width:200px;
    height:200px;
    position:relative;
    animation:3s myrotate linear infinite normal; /*动画名称 动画时间 动画速度 动画延迟 */
}

3.定义@keyframes动画规则

旋转

@keyframes myrotate{
    0% {
      transform :rotateZ(0deg);
    }
    100% {
      transform :rotateZ(360deg);
    }
移动
@keyframes mymove{
from {
  transform :translate(0%);
}
to {
  transform :translate(100%);
}
备注:

scale 缩放
rotate 旋转
skew倾斜
translate 移动

animation 与Transition不同的是:
1.Animation可以通过keyframe显示控制当前帧的属性值,而Transition只能隐式来进行(不能指定每帧的属性值),所以相对而言Animation的功能更加灵活。
2. Animation通过模拟属性值改变来实现动画,动画结束之后元素的属性没有变化;而Transiton确实改变了元素的属性值,动画结束之后元素的属性发生了变化;这一点,这在实际应用中会产生很大的区别。

CSS3 动画3D视角下 旋转圆环的更多相关文章

  1. 网页特效:用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  3. 使用CSS3动画属性实现各种旋转跳跃

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...

  4. CSS3动画(360度旋转、旋转放大、放大、移动)

    Title div { width: 120px; height: 120px; line-height: 120px; margin: 20px; background-color: #5cb85c ...

  5. CSS3 3D图片立方体旋转

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. 制作3D图片立方体旋转特效

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

  7. 【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表(2)下.md

    之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. ...

  8. CSS3实现3D木块旋转动画

    CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...

  9. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

随机推荐

  1. 开源企业平台Odoo 15社区版之项目管理应用模块功能简介

    项目管理无论是各类证书的认证,如PMP.软考高级的信息系统项目管理师.中级的系统集成项目管理工程师等,还是企业实践都有着广泛的实际应用中,至今还是处于热门的行业,合格的或优化的项目经理还是偏少,对于I ...

  2. nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId

    nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...

  3. LuoguP5006 [yLOI2018] 大美江湖 题解

    Content 题意实在是太过复杂了,因此请回到题面查看. Data Range 本部分和 Solution 部分变量的含义同题面. \(1\leqslant n,m\leqslant 100,0\l ...

  4. Shell之awk常用用法

  5. 系统丢包net.netfilter.nf_conntrack_max 超限查看

    sysctl  net.netfilter.nf_conntrack_max  查看限制 sysctl net.netfilter.nf_conntrack_count 查看当前是否超限 echo n ...

  6. 超链接 a 标签点击时,弹出提示框,可以按照如下来写

    onclick="return confirm('确定删除该条记录?')" 加上这条记录后,就可以在访问href属性指向的链接时,有弹出提示

  7. 【LeetCode】146. LRU Cache 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典+双向链表 日期 题目地址:https://le ...

  8. 【九度OJ】题目1175:打牌 解题报告

    [九度OJ]题目1175:打牌 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1175 题目描述: 牌只有1到9,手里拿着已经排好序的 ...

  9. JVM调参

    今天看了下之前做的一个异步处理任务的服务,发现占用内存量比较大,达到2G,但我检查了代码,基本没有static对象.但这个服务有个特点,就是每次执行一个任务的时候,会从数据库中捞大量的数据做处理,因此 ...

  10. 防止 jar 包被反编译

    1.隔离Java程序 最简单的方法就是让用户不能够访问到Java Class程序,这种方法是最根本的方法,具体实现有多种方式.例如,开发人员可以将关键的Java Class放在服务器端,客户端通过访问 ...