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 条评论
登录 后参与评论

相关文章

来自专栏人工智能LeadAI

使用TensorFlow实现手写识别(Softmax)

准备工作 由于将TensorFlow安装到了Conda的tensorflow环境,虽然可以用Jupyter notebook打开,但是没有提示,写代码不方便,所...

3595
来自专栏web前端

HTML+CSS高级

第一章 ...

2986
来自专栏木子昭的博客

<干货>5分钟快速回顾HTML CSS

一.html (一)标签类型 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 ...

2599
来自专栏程序员的诗和远方

让文字沿着路径动起来 (SVG)

由于我对 SVG 也不是太熟悉,有些地方可能有所疏漏,有什么疑问欢迎留言,有什么写错的地方,欢迎指出哈。

2977
来自专栏静晴轩

CSS征途之Background点滴

CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控...

3214
来自专栏闻道于事

CSS样式表基础

层叠样式表:Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态...

2295
来自专栏我分享我快乐

WEB布局代码初学者常见问题整理

1、 单词写错 ? ? 2、 用中文符号 ? ? 3、 标签未结束 ? ? 4、 引号未结束 ? ? 5、 尖括号未结束 ? ? 6、 标签属性之间...

2816
来自专栏欧阳大哥的轮子

CSS中的float定位技术在iOS上的实现

几乎所有会WEB前端开发的同学都知道CSS中有一个float属性用于实现HTML元素的浮动定位展示。float 属性定义元素在哪个方向浮动。以往这个属性总应用于...

572
来自专栏万波的专栏

解剖 WebGL & Three.js 工作原理

本文主要通过两方面来解剖 WebGL & Three.js :WebGL背后的工作原理和以Three.js为例,讲述框架在背后扮演什么样的角色,希望对大家学习有...

1.6K2
来自专栏vue学习

CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)

可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,这里的宽度指的是设置为绝对定位的元素的宽度

893

扫码关注云+社区