CSS3实现3D动画

2019-06-14 admin

一、动画属性

1.transform-style: flat | preserve-3d 动画的形式

flat:默认值平面,也就是没有3d效果

preserve-3d:3d效果展示

如果要用3D表现,这个属性是必须启用的,当然注意属性要加各种前缀。

(这个属性可以把一个处于2维的div变为3d空间,把这个属性比作一个相机的摄像头,这个div内的内容会以3d的形式通过摄像头的形式反馈给你,他的子元素才会享受3d效果,子元素以下的元素就不会有3d效果。)

2.transform-origin:50% 50%;

旋转移动围绕的轴线,默认是中心,可以设left,right,top,bottom,也可以设值数值,这样可以调整旋转移动所围绕的轴线,完成诸如翻页,开门等动作。

(这就相当于你的眼镜啦,位置不同效果也就不同了)

3.perspective 视角

值越小,透视距离越近,效果越明显

该属性为定义3D变换的元素与视图的距离,也就是透视距离。这个属性应添加到视图元素(变换元素的父元素)上。

这是3d动画必备的属性,如果不添加这个属性,则动画会变成平面效果。

一般用在舞台元素也就是容器上,这样会让该容器中所用动画元素使用一个视角,这个属性还可以单独用在每个元素中,自然元素也就只呈现自己的视角样式。

4.backface-visibility:hidden 是否隐藏元素背面

二、动画实现

下面我用部分代码实际阐述一下3D效果的实现。

1.卡片翻转

html

css

效果

2.立方体

html

css

    .box{
        width: 500px;
        height: 500px;
        margin: 50px auto;
        border: 1px solid;
        perspective: 3000px;
        perspective-origin: -90% -160%;
    }
    .box ul{
        width: 100px;
        height: 100px;
        position: relative;
        top: 200px;
        margin: 0 auto;
        transform-style:preserve-3d;
    }
    .box ul li{
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 25px;
        color: white;
        position: absolute;
        background: rgba(225,0,0,0.2);
        border: 1px solid black;
        transition: all 1s linear;
    }
    /*上面*/
    li:nth-child(1){
        transform: translateY(-50px) rotateX(90deg);
    }
    .box ul:hover li:nth-child(1){
        transform: translateY(-100px) rotateX(90deg);
        background: palevioletred;
        border: 0;
        border-radius: 50%;
    }
    /*后面*/
    li:nth-child(2){
        transform: translateX(50px) rotateY(90deg);
    }
    .box ul:hover li:nth-child(2){
        transform: translateX(100px) rotateY(90deg);
        background: #92ecae;
        border: 0;
        border-radius: 50%;
    }
    /*下面*/
    li:nth-child(3){
        transform: translateY(50px) rotateX(90deg);
    }
    .box ul:hover li:nth-child(3){
        transform: translateY(100px) rotateX(90deg);
        background: #ff916a;
        border: 0;
        border-radius: 50%;
    }
    /*左面*/
    li:nth-child(4){
        transform: translateX(-50px) rotateY(90deg);
    }
    .box ul:hover li:nth-child(4){
        transform: translateX(-100px) rotateY(90deg);
        background: greenyellow;
        border: 0;
        border-radius: 50%;
    }
    /*右面*/
    li:nth-child(5){
        transform: translateZ(-50px);
    }
    .box ul:hover li:nth-child(5){
        transform: translateZ(-100px);
        background: lightskyblue;
        border: 0;
        border-radius: 50%;
    }
    /*正面*/
    li:nth-child(6){
        transform: translateZ(50px);
    }
    .box ul:hover li:nth-child(6){
        transform: translateZ(100px);
        background: #be46d8;
        border: 0;
        border-radius: 50%;
    }
    .box ul:hover{
        transform: rotateX(9000deg) rotateY(5000deg);
        transition: all 100s linear;
    }

效果

3.长方体

html

css

    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .wutai{
        width: 900px;
        height: 600px;
        border: 1px solid;
        margin: 0 auto;
        perspective: 1000px;
        perspective-origin: 50% 1%;
    }
    .wutai ul{
        width: 100px;
        height: 300px;
        position: relative;
        margin: 0 auto;
        top: 150px;
        transform-style:preserve-3d;
    }
    .wutai:hover ul{
        transform: rotateY(36000000deg);
        transition: all 1000000s linear;
    }
    .wutai li{
        width: 100px;
        height: 300px;
        position: absolute;
        text-align: center;
        line-height: 300px;
        font-size: 30px;
        color: white;
    }
    li:nth-child(1){
        background: rgba(255,0,0,0.6);
        transform: rotateY(30deg) translateZ(200px);
    }
    li:nth-child(2){
        background: rgba(0,255,0,0.6);
        transform: rotateY(60deg) translateZ(200px);
    }
    li:nth-child(3){
        background: rgba(225,225,0,0.6);
        transform: rotateY(90deg) translateZ(200px);
    }
    li:nth-child(4){
        background: rgba(225,0,225,0.6);
        transform: rotateY(120deg) translateZ(200px);
    }
    li:nth-child(5){
        background: rgba(0,225,225,0.6);
        transform: rotateY(150deg) translateZ(200px);
    }
    li:nth-child(6){
        background: rgba(225,0,0,0.6);
        transform: rotateY(180deg) translateZ(200px);
    }
    li:nth-child(7){
        background: rgba(225,0,225,0.6);
        transform: rotateY(210deg) translateZ(200px);
    }
    li:nth-child(8){
        background: rgba(0,0,225,0.6);
        transform: rotateY(240deg) translateZ(200px);
    }
    li:nth-child(9){
        background: rgba(0,225,225,0.6);
        transform: rotateY(270deg) translateZ(200px);
    }
    li:nth-child(10){
        background: rgba(225,225,0,0.6);
        transform: rotateY(300deg) translateZ(200px);
    }
    li:nth-child(11){
        background: rgba(225,0,225,0.6);
        transform: rotateY(330deg) translateZ(200px);
    }
    li:nth-child(12){
        background: rgba(0,225,225,0.6);
        transform: rotateY(360deg) translateZ(200px);
    }

效果

4.图片旋转

html

css

效果

小结:

总的来说,主要就是配合使用各个动画属性,分清楚自己要写的主容器和动画元素,可以使用定时器来帮助加载各种类样式。最主要的就是:知道自己的动画层次,头脑清晰的去部署完成动画需要的一切。

如果大家觉得我的文章写的还不错的话,就关注 收藏一下哦!

3D动画 更多源码在这里哦 有兴趣的朋友可以参考一下!

https://liyingyingweb.github…

[转载]原文链接:https://segmentfault.com/a/1190000019474667

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67271.html

文章标题:CSS3实现3D动画

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
canvas图片绘制跨域问题解决方案Tainted canvases may not be exported
图片跨域问题的一般解决方法 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下...
2018-04-19
回到顶部