CSS3的3D变换和动画

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);
    }
}

可直接套用运行

最后的最后

在经历上面一番折腾之后,其实最终实现了的是另一种效果,感兴趣的同学可以用手机访问这里,看看第二页的效果。动画没什么特别,主要是变来变去的过程中用到了一些新的东西。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

Xcelsius(水晶易表)系列7——多选择器交互用法

今天继续跟大家讲解水晶易表动态仪表盘的高级用法——多选择器交互用法。 关于选择器的用法,之前的几篇零零碎碎的讲了些,今天是专门讲解水晶易表中几种重要的选择器用法...

3136
来自专栏Coco的专栏

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

1084
来自专栏九彩拼盘的叨叨叨

Grid 布局写法示例

Grid 可以简便、完整、响应式地实现各种页面布局。它比 Flex 布局功能更强大。

662
来自专栏Micro_awake web

谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象。也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素。 常见的有:<br>...

2136
来自专栏性能与架构

什么是 CSS 预处理器 与 后处理器

CSS处理器是做什么的? CSS本身不是编程语言,所以在项目越来越大时,开发和维护就会越来越复杂 CSS处理器做的事情 就是帮助我们提高大规模开发时的效率 CS...

3686
来自专栏LIN_ZONE

css 中 zoom和transform:scale的区别(转载)

还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:

623
来自专栏有趣的Python和你

用python偷懒Arcgis(地类编码转地类名称)excel数据python代码arcgis操作

783
来自专栏james大数据架构

Android中TextView

TextView:展示文本内容控件 要点: 1.android:textSize="20sp",设置字体的大小使用sp作单位 2.设置宽度高度等属性使用dp(d...

1825
来自专栏大前端_Web

编写高效的CSS选择器

CSS规范并没有明确浏览器如何去实现样式系统,仅仅是说明了它们必须这样做。有鉴于此,不同的样式系统引擎可能会拥有完全不同的表现和行为,特别是 Gecko 与 W...

914
来自专栏Android先生

一种粗暴快速的Android全屏幕适配方案

由于Android碎片化严重,屏幕适配一直是开发中较为头疼的问题。面对市面上五花八门的屏幕大小与分辨率,Android基于dp与res目录名称来适配的方案已无法...

993

扫码关注云+社区