本文转载于:《https://blog.csdn.net/lyznice/article/details/54575905

一、2D效果属性

要使用这些属性,我们需要通过 transform ,并且,为了保证兼容性,我们可能还需要添加带有浏览器内核前缀的属性,比如 -webkit-transform。
1、位移属性 translate( x , y )

简单来说,我们可以认为项目处于一个XY坐标轴的原点,translate( x , y ),当x为正的时候,则项目水平(x轴)向右移动[x]距离;负则向左移动[x]距离。y为正的时候,则项目垂直(y轴)向下移动[y],反之向上移动。
当然,我们也可以把该属性,拆分为translateX(n),和translateY(n),原理相同,不过一般我们还是推荐综合的写法。

代码片段

  1. .box01{
  2. background: rgba(7,204,63,0.9);
  3. }
  4. .box02{
  5. background: rgba(7,204,63,0.6);
  6. transform: translate(100px,100px);
  7. }
  8. .box03{
  9. background: rgba(7,204,63,0.6);
  10. transform: translate(-100px,-100px);
  11. }
  12. .box04{
  13. background: rgba(7,204,63,0.3);
  14. transform: translateX(-300px);
  15. }

  

2、旋转属性 rotate()

这个属性也很简单,比如rotate( n deg),n是数字,deg是单位,我们可以理解为角度,0deg则不旋转。n为正时,顺时针旋转n度,反之,逆时针旋转。
而rotateX和rotateY属性,则可以归纳如3D立体效果的范畴,我们在下面再说。

  1. .box01{
  2. background: rgba(7,204,63,0.6);
  3. transform: translate(-200px,0) rotate(-90deg);
  4. }
  5. .box02{
  6. background: rgba(7,204,63,0.9);
  7. }
  8. .box03{
  9. background: rgba(7,204,63,0.6);
  10. transform: translate(200px,0) rotate(45deg);
  11. }

 

3、缩放属性 scale()

scale( x , y ),width为原有的值的 x 倍,height为原有的值的 y 倍。

  1. .box01{
  2. background: rgba(7,204,63,0.9);
  3. }
  4. .box02{
  5. background: rgba(7,204,63,0.6);
  6. transform: scale(1.5,0.5);
  7. }
  8. .box03{
  9. background: rgba(7,204,63,0.6);
  10. transform: scale(0.5,1.5);
  11. }

  

4、倾斜属性 skew()

skew( x deg, y deg ) ,分别表示 X轴和 Y轴倾斜的角度。值可以为负,反方向。
该属性也可以拆分为,skewX( ndeg ),skewY( ndeg ),对 X轴和 Y轴的倾斜角度分别描述。
就我本人而言,这个属性我项目中很少用

二、3D效果属性

3D效果就是立体效果,怎么实现一个3D效果的动画呢?让我们分步来说。
实现3D效果的,相关的属性,很多,兼容性也不一样,我们这里只说一些最常用的属性和使用方法。
我们在这里简单分为三步,第一步是立体环境,第二步是项目的动作或者说操作,第三部则是完成这些动作的规律,比如说时间,速度等。这些综合起来,就是一个3D效果的动画。

1、跟2D动画不同的是,我们需要在外层元素上添加这两个属性(环境):

1) transform-style:flat / preserve-3d 默认前一个,但是3D效果需要我们在整个动画的最外层元素,设置后一个属性值。
2) perspective:none / px 这个属性可以理解为视距,如果把屏幕当作空间,我们做的这个3D效果距离视图的距离,默认为none(那就不要用了),或者是像素值,如1000px。

2、实现一个3D动画,在2D相关属性使用的基础上,我们还经常用的这几个(动作):

1) 3D旋转 rotateX( deg ) rotateY( deg ) rotateZ( deg ) ,deg为旋转角度,单位deg,绕XYZ轴旋转的情况,来设定rotateX/Y/Z。
2) 3D偏移 translateZ() translate在2D动画中是偏移,在3D中同样也是如此,只是,在3D效果中我们增加了一个Z轴偏移。
3)3D缩放 scale3d(x,y,z) 也可以分开写,如scaleZ()

我们简单先来看一下效果

3、一个动画,我们怎么设置它的启动方式,动画效果怎么样,是快是慢,匀速还是其他,什么时候启动。我们一般都通过 transition 这个过渡属性来设置,当然,2D动画也可以用这个属性。

这个属性可以拆分为:
transition-property(过渡的属性的名称)。
transition-duration(定义过渡效果花费的时间,默认是 0)。
transition-timing-function:linear(匀速) ease(慢速开始,然后变快,然后慢速结束)(规定过渡效果的时间曲线,最常用的是这两个)。
transition-delay(规定过渡效果何时开始。默认是 0)。
当然,一般情况下,我们都是写一起的,比如:transition: width 2s ease 1s 。

综合上面三点下面附上一个简单demo的代码

  1. <div class="box">
  2. <div class="box01">translateZ(-50px)</div>
  3. <div class="box02">rotateX(360deg)</div>
  4. <div class="box03">rotateY(360deg)</div>
  5. </div>

  

  1. .box{
  2. height: 300px;
  3. width: 700px;
  4. margin: 0 auto;
  5. margin-top: 100px;
  6. border: 2px solid green;
  7. position: relative;
  8. transform-style:preserve-3d;
  9. perspective:1000px;
  10. }
  11. .box div{
  12. height: 150px;
  13. width: 150px;
  14. float: left;
  15. margin-right: 30px;
  16. position: relative;
  17. }
  18. .box01{
  19. background: rgba(7,204,63,0.9);
  20. transition: all 3s;
  21.  
  22. }
  23. .box02{
  24. background: rgba(7,204,63,0.6);
  25. transition: all 3s;
  26. }
  27. .box03{
  28. background: rgba(7,204,63,0.6);
  29. transition: all 3s
  30. }
  31. .box01:hover{
  32. transform: translateZ(-50px);
  33. }
  34. .box02:hover{
  35. transform: rotateX(360deg);
  36.  
  37. }
  38. .box03:hover{
  39. ;
  40. transform: rotateY(360deg);
  41. }

  

三、关键帧动画

实际项目中,仅仅是上面的那些知识,是不能满足我们对动画效果的要求的,还有个关键的知识点就是关键帧动画。
什么是关键帧动画,你可以理解为,我们可以通过这个对一个动画的过程的每一部分的表现都做出要求。

一个关键帧动画,最少包含两部分,animation 属性及属性值(动画的名称和运行方式运行时间等)。@keyframes(规定动画的具体实现过程)

animation 属性可以拆分为(当然,我们一般都写一起)
1)animation-name 规定@keyframes 动画的名称。
2)animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3)animation-timing-function 规定动画的速度曲线。默认是 “ease”,常用的还有linear,同transtion 。
4)animation-delay 规定动画何时开始。默认是 0。
5)animation-iteration-count 规定动画被播放的次数。默认是 1,但我们一般用infinite,一直播放。

而@keyframes的使用方法,可以是from->to(等同于0%和100%),也可以是从0%->100%之间任意个的分层设置。我们通过下面一个稍微复杂点的demo来看一下,基本上用到了上面说到的大部分知识。

  1. eg:
  2. @keyframes mymove
  3. {
  4. from {top:0px;}
  5. to {top:200px;}
  6. }
  7.  
  8. 等同于:
  9.  
  10. @keyframes mymove
  11. {
  12. 0% {top:0px;}
  13. 25% {top:200px;}
  14. 50% {top:100px;}
  15. 75% {top:200px;}
  16. 100% {top:0px;}
  17. }

  

双重立方体旋转

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Examples</title>
  7. <style type="text/css">
  8. *{
  9. padding:;
  10. margin:;
  11. box-sizing: border-box;
  12. }
  13. body{
  14. background: #9CC;
  15. perspective:1000px;
  16. }
  17. .box{
  18. height:200px;
  19. width: 200px;
  20. position: relative;
  21. margin:200px auto;
  22. transform-style:preserve-3d;
  23. -webkit-transform-style:preserve-3d;
  24. transform:rotateX(20deg) rotateY(20deg);
  25. animation:one 5s linear infinite;
  26. -webkit-animation:one 5s linear infinite;
  27. }
  28. @keyframes one{
  29. from{
  30. transform:rotateX(-20deg) rotateY(0deg) ;
  31. }
  32. to{
  33. transform:rotateX(340deg) rotateY(360deg) ;
  34. }
  35. }
  36. @-webkit-keyframes one{
  37. from{
  38. transform:rotateX(-20deg) rotateY(0deg) ;
  39. }
  40. to{
  41. transform:rotateX(340deg) rotateY(360deg) ;
  42. }
  43. }
  44. .box div{
  45. width:200px;
  46. height: 200px;
  47. background: black;
  48. opacity: 0.3;
  49. position: absolute;
  50. top:;
  51. left:;
  52. border: 1px solid white;
  53. transition:all 2s;
  54. }
  55. .box span{
  56. width: 100px;
  57. height: 100px;
  58. background: orange;
  59. position:absolute;
  60. border: 1px solid white;
  61. top:%;
  62. left:%;
  63. opacity: 0.7;
  64. margin-top: -50px;
  65. margin-left: -50px;
  66. font-size: 50px;
  67. color: white;
  68. font-weight: bold;
  69. text-align: center;
  70. line-height: 100px;
  71. }
  72. .box div:nth-child(){
  73. transform:translateZ(100px);
  74.  
  75. }
  76. .box div:nth-child(){
  77. transform:translateZ(-100px);
  78.  
  79. }
  80. .box div:nth-child(){
  81.  
  82. transform:rotateX(90deg) translateZ(100px);
  83.  
  84. }
  85. .box div:nth-child(){
  86. transform:rotateX(90deg) translateZ(-100px);
  87.  
  88. }
  89. .box div:nth-child(){
  90. transform:rotateY(90deg) translateZ(100px);
  91.  
  92. }
  93. .box div:nth-child(){
  94. transform:rotateY(90deg) translateZ(-100px);
  95.  
  96. }
  97. .box:hover div:nth-child(){
  98. transform:translateZ(200px);
  99. }
  100. .box:hover div:nth-child(){
  101. transform:translateZ(-200px);
  102.  
  103. }
  104. .box:hover div:nth-child(){
  105.  
  106. transform:rotateX(90deg) translateZ(200px);
  107.  
  108. }
  109. .box:hover div:nth-child(){
  110. transform:rotateX(90deg) translateZ(-200px);
  111.  
  112. }
  113. .box:hover div:nth-child(){
  114. transform:rotateY(90deg) translateZ(200px);
  115.  
  116. }
  117. .box:hover div:nth-child(){
  118. transform:rotateY(90deg) translateZ(-200px);
  119.  
  120. }
  121. .box span:nth-child(){
  122. transform:translateZ(50px);
  123.  
  124. }
  125. .box span:nth-child(){
  126. transform:translateZ(-50px) rotateY(180deg);
  127.  
  128. }
  129. .box span:nth-child(){
  130. transform:rotateX(90deg) translateZ(50px);
  131.  
  132. }
  133. .box span:nth-child(){
  134. transform:rotateX(90deg) translateZ(-50px);
  135.  
  136. }
  137. .box span:nth-child(){
  138. transform:rotateY(90deg) translateZ(50px);
  139.  
  140. }
  141. .box span:nth-child(){
  142. transform:rotateY(270deg) translateZ(50px);
  143. }
  144.  
  145. </style>
  146. </head>
  147. <body>
  148. <div class="box">
  149. <div></div>
  150. <div></div>
  151. <div></div>
  152. <div></div>
  153. <div></div>
  154. <div></div>
  155. <span></span>
  156. <span></span>
  157. <span></span>
  158. <span></span>
  159. <span></span>
  160. <span></span>
  161. </div>
  162.  
  163. </body>
  164. </html>

CSS3动画相关属性详解的更多相关文章

  1. CSS3 动画及过渡详解

    今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...

  2. PyQt(Python+Qt)入门:Designer组件属性编辑界面中QWidget类相关属性详解

    本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...

  3. CSS3中border-image属性详解

    border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...

  4. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  5. 第15.11节 PyQt(Python+Qt)入门学习:Qt Designer(设计师)组件Property Editor(属性编辑)界面中主窗口QMainWindow类相关属性详解

    概述 主窗口对象是在新建窗口对象时,选择main window类型的模板时创建的窗口对象,如图: 在属性编辑界面中,主窗口对象与QMainWindow相关的属性包括:iconSize.toolButt ...

  6. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

  7. Ant build.xml相关属性详解

    关键字: ant build.xml Ant的概念 可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道make这个命令.当编译Linux内核及一些软件的源程序 ...

  8. CSS3:overflow属性详解

    1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...

  9. Visifire Chart相关属性详解

    <vc:Chart x:Name="HourlyChart" Theme="Theme1" Grid.Row="1" xmlns:vc ...

随机推荐

  1. linux基础1_文件类型、拓展名、目录配置

    命令ls -l,显示的第一个属性代表了这个档案的档案类型 [d]:目录 [-]:普通文件 [l]:连接文件 [b]:存储数据以供系统访问的接口设备 [c]:串行接口的端口设备,例如键盘.鼠标 [s]: ...

  2. c#中,点击一个菜单项后调用exe文件

    using System.Diagnostics; private void 导出数据ToolStripMenuItem_Click(object sender, EventArgs e) { Pro ...

  3. Girls Like You--Maroon 5

    Girls Like You Spent 24 hours, I need more hours with you (24小时过去 还想和你 相处更久) You spent the weekend g ...

  4. Sourcetree 出现错误提示git -c diff.mnemonicprefix=false -c core.quotepath=false fetch origin

    具体表现为:sourcetree无法和gitlab远程仓库进行交互,但使用本地cmd,可以使用git命令和远程仓库交互通过各种账户.秘钥等操作,都无法解决该问题具体信息如下: 解决方式:点击 工具–& ...

  5. Linux的正则练习

    grep和 egrep的正则表达式 1.显示三个用户root.wang的UID和默认shell cat /etc/passwd | grep “^\(root\|wang\)” | tr ‘:’ ‘ ...

  6. struts2模糊查询

    dao层 public interface DimDao { //一个条件 public List<User> userdim(User user); //两个条件且关联表格 public ...

  7. 【线性代数】3-1:向量空间(Space of Vectors)

    title: [线性代数]3-1:向量空间(Space of Vectors) categories: Mathematic Linear Algebra keywords: Vectors Spac ...

  8. vim 代码块排版

    http://cookoo.iteye.com/blog/32275 方法: 1. 按v进入visual状态,选择多行,用>或<缩进或缩出 2. 通常根据语言特征使用自动缩进排版:在命令状 ...

  9. Django基础之render()

    结合一个给定的模板和一个给定的上下文字典, 并返回一个渲染后的HttpResponse对象. 参数: request: 用于生成响应的请求对象 template_name: 要使用的模板的完整名称, ...

  10. [Linux]kali更新/etc/apt/sources.list

    vim /etc/apt/sources.list #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contri ...