CSS3的3D变换和动画

IMWeb前端团队

发布于 2019-12-03 17:32:32

1.2K0

发布于 2019-12-03 17:32:32

文章被收录于专栏：IMWeb前端团队

本文作者：IMWeb moonye 原文出处：IMWeb社区 未经同意，禁止转载

CSS3的3D变换

transform属性

attr	des	css level
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

@transfrom兼容性

IE10，firefox以及Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用.

一个demo

这个div会沿着Y轴旋转130deg

div
{
transform: rotateY(130deg);
}

一个H5上的应用场景

实现一个旋转木马的效果，这里列出核心代码，完整的后续放在github上

核心是css代码

一个div作为舞台的

<div class="container">
</div>
.container {
    perspective: 800px; //这里是一个视角的位置，
}

perspective 800px是一个视角的位置，表示屏幕距离3d变化中心点的位置，一般是这个经验值，可以设置大一点，这样你看到的动画什么的就会离你很远。。。。

一个容器

<div class="container">
                <ul id="js-course-list-3" class="m-courseList"></ul>
 </div>
 .m-courseList {
     transform-style: preserve-3d;
 }

preserve-3d是透视属性，有了这个用户看到的效果才有空间感，没有的话看到的效果就和2d没区别了。

所有卡片给到一个旋转的角度

用模板实现是很方便的一件事情

  style="transform: rotateY(<%=opt.deg%>deg) translateZ(<%=opt.tz%>px);-webkit-transform: rotateY(<%=opt.deg%>deg) translateZ(<%=opt.tz%>px)"

默认情况下上面所有的卡片效果看起来是旋转了，但是都挤到一起去了，上面的translateZ是让每个卡片向它们的正前方平移一个具体的，这样看来才会形成一个类似立体圆柱的效果，也就是旋转木马的效果了

要让它动起来，js也少不了，在每次滑动结束后触发每个卡片的旋转

$.map(M.lis, function(item, i) {
            var deg = Math.floor(360/M.max);
            $(item).css({
                transform: 'rotateY('+ (index+i) * deg+'deg) translateZ(' + 130 / Math.tan(deg /360 * Math.PI)  +'px)'
            })
        });

CSS3 @keyframe规则

属性

attr	des	css level
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

@keyframe兼容性

IE10，firefox以及Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用

一个demo

该demo的作用是使div的背景从红色变成绿色，整个动画时间是5s

[@keyframes](/user/keyframes) myfirst
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

一个H5上的应用场景

H5页面分屏的时候，底部一般会有一个小三角上下移动，表示还有一页内容的。代码如下：

.item-1::after {
    position: absolute;
    left: 50%;
    margin-left: -11px;
    bottom: 1%;
    content: '';
    background: url(../img/arrow.png) no-repeat center top;
    height: 22px;
    width: 20px;
    -webkit-animation: hover1 1s ease-in-out infinite alternate;
    animation: hover1 1s ease-in-out infinite alternate;
    -webkit-background-size: contain;
    background-size: contain;
}
@-webkit-keyframes hover1{
    0%  {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0px);
    }
}

[@keyframes](/user/keyframes) hover1{
    0%  {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}