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. Go1.13 标准库的 http 包爆出重大 bug，你的项目中招了吗？ 原创： 王亚楼 Go语言中文网 今天

    Go1.13 标准库的 http 包爆出重大 bug,你的项目中招了吗? 原创: 王亚楼 Go语言中文网 今天

  2. 三句话看明白jdk收费吗

    对于从oracle下载的jdk8:JDK8u200(含)以下版本不收费. 对于从oracle下载的jdk11:JDK 11.0.0不收费,JDK 11.0.1不收费. 对于openjdk:免费 ——— ...

  3. 【C++】C++中explicity关键字的使用

    读者可以尝试预言一下这段代码的输出: #include <iostream> using namespace std; class Complex { private: double re ...

  4. java上传图片并压缩图片大小

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...

  5. mp4文件转码为m3u8

    https://bbs.csdn.net/topics/392046401 *********************************************** 转码完成,我直接播放m3u8 ...

  6. RabbitMQ安装后无法访问15672端口

    切换到RabbitMQ的安装目录 sbin 目录下执行: rabbitmq-plugins enable rabbitmq_management 即可打开管理界面. rabbitmq的web管理界面无 ...

  7. Android studio:URI is not registered 的解决办法

    今天新导入一个android studio的工程,发现在布局文件中报URI is not registerd的错误,布局文件的命名空间变成红色的了. 解决方案: 进入 File->Setting ...

  8. Linux CentOS7 下无图形界面安装Oracle11G R2版本

    01,系统 Centos7 数据库版本 Oracle_11gR2 ,以及硬件要求 内存不能小于 1G,可用硬盘不小于8G Swap分区空间不小于2G grep MemTotal /proc/memin ...

  9. docker: 构建自己的镜像

    我们给予ubuntu的镜像然后拷贝python的requirement.txt文件进去,再根据这个文件安装对应的python库 拷贝文件到docker容器.首先查找对应的容器ID.然后执行命令 doc ...

  10. nginx http和https共存

    server { listen 80 default backlog=2048; listen 443 ssl; server_name linuxyan.com; root /var/www/htm ...