CSS3 애니메이션 속성 변환 예제 튜토리얼-CSS 튜토리얼-php.cn

프론트엔드든 디자이너든 이미 웹페이지라는 2차원 공간 작업에 익숙하고 JS를 사용하여 타임라인 애니메이션을 처리하는 데 익숙하다고 생각합니다. 오늘부터 저는 몇 가지 "새로운" 것, 웹 페이지의 3차원, 순수 CSS로 구현된 애니메이션을 여러분과 공유하겠습니다. 지면의 제약으로 인해 기본적인 것부터 좀 더 복잡한 3D 애니메이션까지 3~4회 정도 이야기해보겠습니다. 그러므로 많은 학생들이 이해하는 것과 다를 수도 있고, 심지어 모순될 수도 있습니다. 모두가 기사 아래의 오류를 지적하고 함께 배울 수 있기를 바랍니다.

이전에 절대 위치 지정을 사용할 때 이미 Z축에 대한 사전 접촉을 가졌습니다. 그 당시에는 단순한 레이어링에 불과했습니다. 이제 더 강력한 속성인 변환을 소개합니다.

문자 그대로의 의미에서 알 수 있듯이 Transform은 변환을 의미합니다. 해당 값에는 주로 회전, 기울이기, 크기 조정, 이동 및 행렬 변환 행렬이 포함됩니다.

이번에는 주로 회전을 사용하여 예제를 작성합니다. 왜냐하면 나중에 3D 부분과 더 잘 일치할 수 있기 때문입니다. 다른 매개변수를 하나씩 교체하면 사용법을 이해할 수 있습니다.

3D Transform에는 회전 방법이 있는데, RotateX(각도) X축 회전, RotateY(각도) Y축 회전, RotateZ(각도) Z축 회전이 있습니다.

XYZ는 평면이 회전하는 축을 나타내며 내부 값은 각도입니다. 더 생생하게 만들려면 이 그림을 보거나

transform: perspective(800);

로그인 후 복사

을 보거나 원근 속성을 직접 사용하세요.

perspective: 800;

로그인 후 복사

원근은 캔버스(상위 요소)에 쓰거나 요소 자체에 직접 쓸 수 있습니다. , 캔버스의 변형이 하나만 있는 경우 거의 차이가 없습니다. 그러나 캔버스에 여러 변형이 있는 경우 두 가지 작성 방법의 차이가 즉시 드러납니다. 이 그림처럼 노란색 부분은 컬러블럭에 바로 Perspective를 쓴 것이고, 보라색 부분은 캔버스를 Perspective 요소로 사용하여 부모 컨테이너에 Perspective를 쓴 것이므로 자식 요소의 모양이 다릅니다. .

원근감의 값은 3D 변형 효과의 강도를 결정합니다. 이 값은 대략적으로 거리로 이해될 수 있습니다. 크기가 클수록 물체에서 더 멀어집니다. 멀리 있는 큐브(예: 루빅스 큐브)가 회전하는 것처럼 시각적 효과는 상대적으로 약하지만, 루빅스 큐브가 눈앞에서 회전하면 효과가 더 강해집니다.

여기에서는 새로운 변환 매개변수인translateZ를 사용하겠습니다.

RotateZ를 사용하면 이미 Z축을 찾을 수 있으며, TranslateZ를 사용하여 Z축의 좌표를 처리할 수 있습니다. 요소가 눈앞에 가까이 또는 멀리 나타나도록 하십시오. 해당 값은 상위 요소의 관점 값을 기반으로 합니다.

예를 들어 상위 요소의 Perspective 값이 800인 경우 하위 요소의 TranslateZ 값이 작을수록 하위 요소가 우리에게서 멀어질수록 작게 보입니다. 하위 요소의 TranslateZ가 800에 가까우나 800보다 작은 경우(예: 790+) 요소는 전체 화면을 채웁니다(브라우저를 초과함). 이번에는 요소가 도착했음을 의미하기 때문입니다. 당신 앞에는 작은 나뭇잎이 있고 그 뒤에도 모든 것을 덮을 수 있습니다. 자식 요소의 수가 800개를 초과하면 요소가 눈 뒤에 도달했다는 의미이며 머리 뒤쪽에 있는 요소가 보이지 않게 됩니다.

(여기서 조금 언급하자면, 위 3개의 평면 회전 사진에서 Y축이나 Y축이 90도로 회전하면 그래픽이 사라지는 것을 볼 수 있습니다. 이는 90도에서 평면이 우리와 접촉하기 때문입니다. 시선이 평행하고 표면에 두께가 없기 때문에 각도가 커지면 다시 나타나게 됩니다.)

원근법에 대해 간략하게 살펴보겠습니다. 속성 원점 - 원점.

이 속성은 이해하기 쉽습니다. 플래시를 사용할 수 있는 경우 관점 원점은 애니메이션을 적용할 때 요소가 이 정렬 지점을 중심으로 회전합니다. 스핀이나 뭔가. CSS3의 기본 Perspective-Origin은 요소의 중심입니다.

원근감과 변환이 있으면 변환 스타일 속성을 사용할 차례입니다. 여기에는 flat과 Preserve-3D라는 두 가지 매개변수가 있습니다. flat은 평면을 나타내는 기본값이고, 보존-3d는 3D 관점을 나타냅니다.

이것은 3D 공간을 여는 방법이라는 것을 간단히 이해할 수 있습니다.

transform-style: preserve-3d；

로그인 후 복사

는 단지 스위치일 뿐이며 플랫을 사용하지 않는 한 이 속성은 사진에 아무런 영향을 미치지 않습니다.

3D世界里还有一个原理就是，你无法穿过一个物体看到他后面的物体，除非这个物体是透明的，这里我们就用到一个属性，backface-visibility，当他的值为hidden的时候，就是正常的3D世界，当不写这个属性的时候…….我建议大家试试。

现在简单的几何原理都有了，我们可以让平面变3D的过程动态的演示出来了，就是css3的 Animation ！

在了解Animation之前，我们必须了解另一个特殊的东西，Keyframes。

这里用过flash的同学一看就能明白，就是关键帧，每一个关键帧代表动画的一个过程节点，Keyframes具有其自己的语法规则，他的命名是由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。例如：

@-moz-keyframes name{     0% {       -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     25% {       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     50% {       -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     75% {       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     100% {       -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }

로그인 후 복사

这里，name是动画的名称，百分比里边只要写你要实现的动画就行，可以写位移啊，色值变化啊，透明度变化啊等等。

然后我们再看一下Animation的几个常用属性：

animation-name:&#39;name&#39;;/*动画属性名，也就是我们前面keyframes定义的动画名*/animation-duration: 2s;/*动画持续时间*/animation-timing-function: linear;/*动画频率，有匀速，先快后慢    linear：动画以匀速运动
ease：默认值，开始慢，中间快，结束慢，不对称
ease-in：开始慢，后面快
ease-out：开始快，后面慢
ease-in-out：开始慢，中间快，结束慢，对称（注意与ease的区别）
cubic-bezier(n,n,n,n)：可以使用cubic-bezier自定义速度，n的取值从0到1*/animation-delay: 2s;/*动画延迟时间*/animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/animation-direction: alternate;/*定义动画方式， normal 动画仅正向播放。 alternate 动画正向播放奇数次迭代，并反向播放偶数次迭代。在反向播放周期中，与 animation-timing-function 关联的值也会反转。*/

로그인 후 복사

这些属性，看字面就能理解了，就不详细解释，用在例子里是最形象的。这里先写一个简单平面旋转的例子，就本例子而言，webkit核心的浏览器处理变型跟动画明显是最好的，而moz下会有明显的锯齿出现。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;
padding:0;}
.wrapper1{
    width:150px;
    height:191px;
    border:#eee 1px solid;
    border-radius:10px;
    padding:2px;    float:left;
    margin:200px 0 0 50px;    -moz-perspective:800px;      -moz-transform-style:preserve-3d;      -webkit-perspective:800px;      -webkit-transform-style:preserve-3d;      -moz-backface-visibility:;    -webkit-backface-visibility:hidden;
}
.box1{
    width:150px;
    height:191px;
    background:url(http://www.internetke.com/uploads/imgbg/other/rut.jpg);
    border-radius:10px;    -webkit-animation-name:wobble;  -webkit-animation-duration: 5s;  -webkit-animation-timing-function: linear;  -webkit-animation-delay: 0;  -webkit-animation-iteration-count: infinite;  -webkit-animation-direction: ;  -moz-animation-name:wobble;  -moz-animation-duration: 5s;  -moz-animation-timing-function: linear;  -moz-animation-delay: 0;  -moz-animation-iteration-count: infinite;  -moz-animation-direction: ;
}
@-webkit-keyframes wobble{     0% {          -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     25% {          -webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     50% {          -webkit-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     75% {          -webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     100% {          -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }
@-moz-keyframes wobble{     0% {           -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     25% {           -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     50% {           -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     75% {           -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }     100% {           -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }</style>
</head>
<body>
<p class="wrapper1">
    <p class="box1"></p>
</p>
</body>
</html>

로그인 후 복사

View Code

题外话：希望大家不要因为IE9以下版本的不兼容就延迟学习新的东西，那就会处处比别人慢一步。另外，从Safari开始，浏览器已经可以由3D函数触发硬件加速。

위 내용은 CSS3 애니메이션 속성 변환 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!