3D

在2d的基础上添加 z 轴的变化
3D 位移：在2d的基础上添加 translateZ（），或者使用translate3d（）
　　translateZ（）：以方框中心为原点，变大

3D 缩放：在2d的基础上添加 scaleZ（），或者使用scale3d（）
　　scaleZ（）和 scale3d（）函数单独使用时没有任何效果

3D 透视：perspective 规定3D元素的透视效果
　　可以取值为none或不设置，这种情况下说明没有透视效果
　　取值越小，3d效果越明显

3D背面可见：backface-visibility 定义元素在不面对屏幕时是否可见
　　transform-style：规定被嵌套元素在3D空间中显示
　　transform-style：flat； 子元素将不保留其 3d 位置
　　transform-style：preserve-3d； 子元素将保留其3d位置

动画
　　动画是使元素从一种样式逐渐变化为另一种样式的效果。
　　css中通过 @keyframes 规则是创建动画，可以改变任意多的样式任意多的次数。
　　当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
　　指定至少这两个CSS3的动画属性绑定向一个选择器：
　　规定动画的名称
　　规定动画的时长
　　语法：@keyframes styleName {
　　　　keyframes-selector{css-style;}
　　　　}
　　keyframes-selector：可以用百分比来规定变化发生的时间
　　也可以用关键词 "from" 和 "to"
　　0% 是动画的开始，100% 是动画的完成

3D示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

    * {margin: 0; padding: 0;}

    .box {width: 600px; height: 600px; margin: 0 auto;  position: relative; perspective: 800px;}

        .box ul {list-style: none; width: 300px; height: 300px; transition: all 2s;

                    position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-style: preserve-3d;}

            .box ul li {width: 300px; height: 300px;  text-align: center; line-height: 100px;

                        position: absolute; font-size: 36px;}

            .box ul li:nth-child(1) {background: rgba(255, 0, 255, 0.5); transform: translateY(-150px) rotateX(90deg);}

            .box ul li:nth-child(2) {background: rgba(192, 157, 81, 0.5); transform: translateY(150px) rotateX(-90deg);}

            .box ul li:nth-child(3) {background: rgba(35, 130, 142, 0.5); transform: translateX(-150px) rotateY(-90deg);}

            .box ul li:nth-child(4) {background: rgba(142, 35, 35, 0.5); transform: translateX(-150px) rotateY(90deg);}

            .box ul li:nth-child(5) {background: rgba(121, 17, 240, 0.5); transform: translateZ(150px);}

            .box ul li:nth-child(6) {background: rgba(47, 142, 35, 0.5); transform: translateZ(-150px) rotateY(180deg);}

        .box ul:hover {transform:rotateX(360deg) rotateY(360deg);}

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li>上</li>

            <li>下</li>

            <li>左</li>

            <li>右</li>

            <li>前</li>

            <li>后</li>

        </ul>

    </div>

</body>

</html>

结果

动画示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Demo</title>

    <style>

    .box {

        width:100px;

        height:100px;

        background:red;

        position:relative;

        animation:animationStyle 5s linear 2s infinite alternate;

    }

    @keyframes animationStyle

    {

        0%   {background:red; left:0px; top:0px;}

        25%  {background:yellow; left:200px; top:0px;}

        50%  {background:blue; left:200px; top:200px;}

        75%  {background:green; left:0px; top:200px;}

        100% {background:red; left:0px; top:0px;}

    }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

结果

 

CSS-3D动画笔记的更多相关文章

  1. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  2. css 3D动画

    一.今天让我们来学习一下css 3D吧! 1.首先我们要学习好css3 3d一定要有一定的立体感! 2.再来那就聊聊原理吧! 3.css3 3d 顾名思义是由两个2d名片组成的 但不是让你建立连个2d ...

  3. css 3d 动画 相关

    transform-style: preserve-3d; 设置3D模式 perspective:700px :属性定义 3D 元素距视图的距离,以像素计.该属性允许您改变 3D 元素查看 3D 元素 ...

  4. 8个经典HTML5 3D动画赏析

    HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

  5. 第四十二课：基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  6. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  7. 从css 3d说到空间坐标轴

    有一次我们说到掷骰子那个游戏,当时是用了一个steps属性+雪碧图来制作帧动画,这当然颇为不错,但其实一开始我想的不是这样的,我想的是用真的3d和动画去做,这个方案涉及到不少空间的知识,今天来给大伙好 ...

  8. 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

    今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...

  9. CSS实现动画特效导航栏

    0 写在前面 今天用纯CSS编写了一种带有特效的导航栏,一方面巩固熟悉了导航栏的一般写法,另一方面练习了CSS3的一些新特性. 1 实现效果 当鼠标划过时,实现了一种动态百叶窗效果. 2 实现细节 2 ...

  10. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

随机推荐

  1. C++ std::map 屏蔽排序

    转载:https://blog.csdn.net/sendinn/article/details/96286849 最近在项目中用标准库中的关联性容器map,但知道map默认升序的,但在一个需求时又不 ...

  2. mqtt概念整理

    运行模式: 服务器: emqx (https://docs.emqx.io/edge/v3/cn/install.html) 协议头字节数: 2个字节 三种消息可能性保障(Qos): Qos0:最多一 ...

  3. scrapy中的Pipeline

    当Item在Spider中被收集之后,它将会被传递到Item Pipeline,这些Item Pipeline组件按定义的顺序处理Item. 每个Item Pipeline都是实现了简单方法的Pyth ...

  4. Python之多态案例

    class Canvas: def draw_pic(self, shape): print('--start draw--') shape.draw(self) class Rectangle: d ...

  5. Nginx实践篇（5）- Nginx代理服务 - 代理缓冲区、代理重新定义请求头、代理连接超时（转）

    Nginx实践篇(5)- Nginx代理服务 - 代理缓冲区.代理重新定义请求头.代理连接超时 nginx参数默认值 http://nginx.org/en/docs/http/ngx_http_co ...

  6. Chrome禁用software_reporter_tool

    今天开机后,从几分钟到半个小时之间,感觉机器反应有些慢,发现CPU占用80-90%.查看任务管理器, 有一个 software_reporter_tool.exe 的程序占用了一半的CPU使用率. 转 ...

  7. 【GMT43智能液晶模块】例程二十一：DMA LAN实验——高速数据传输测速

    源代码下载链接: 链接:https://pan.baidu.com/s/1wQomZvOUP9_ZslZus_NSIA 提取码:3fmf 复制这段内容后打开百度网盘手机App,操作更方便哦 GMT43 ...

  8. python中的__futrue__模块，以及unicode_literals模块

    Python的每个新版本都会增加一些新的功能,或者对原来的功能作一些改动.有些改动是不兼容旧版本的,也就是在当前版本运行正常的代码,到下一个版本运行就可能不正常了. 从Python 2.7到Pytho ...

  9. linux安装jira

    JIRA配置本地MYSQL数据库 https://blog.csdn.net/coin_one/article/details/78376238 jira7.3.6 linux安装及破解 https: ...

  10. (转) C#使用ODP.NET（Oracle.ManagedDataAccess.dll）操作Oracle数据库

    原贴链接:https://www.cnblogs.com/mq0036/p/11052359.html C#使用ODP.NET(Oracle.ManagedDataAccess.dll)操作Oracl ...