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

相关文章

来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2936
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏跟着阿笨一起玩NET

c#实现打印功能

3702
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2782
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2787
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

38610
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3005
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

4229
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5767
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8668

扫码关注云+社区