CSS3 3D 特效_学习笔记

首页免费课 CSS3 3D 特效笔记

CSS3 3D 特效

                
                liuyubobobo
            全栈工程师

                    查看讲师更多课程 
                    liuyubobobo讲师的其他课程
                
算法与数据结构（C++版） 面试/评级的算法复习技能包
实战·中级·11139

                                                                                                                                    ￥166.00
                                            
玩转算法面试-- Leetcode真题分门别类讲解
实战·中级·7342

                                                                                                                                    ￥266.00
                                            
 7个经典应用诠释Java算法精髓
实战·中级·1852

                                                                                                                                    ￥69.00
                                            
Python3入门机器学习&nbsp;经典算法与应用&nbsp;&nbsp;
实战·中级·5752

                                                                                                                                    ￥499.00
                                            
结合编程学数学 专为程序员设计的线性代数
实战·初级·3342

                                                                                                                                    ￥348.00
                                            
玩转算法系列--图论精讲（Java版）
实战·中级·1570

                                                                                                                                    ￥348.00
                                            
                难度中级
            
                时长 1小时 0分
            
                学习人数
            
综合评分9.70
                            206人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.5
                                逻辑清晰

最热最新

慕慕0510218 02:00

transition

查看全部

0 采集收起来源： CSS3中transition效果分析
2021-11-17
白灼蘸酱油
设置3D场景
浏览器本身是一个二维平面，想要看成3D的话我们得要在平面的概念上加入另一个维度，也就是深度，因此要想设置3D场景我们得要设置从那个角度观察浏览器。
三维物体到浏览器窗口之间的距离
-webkit-perspective:800;
观察视点两个属性值分别对应x轴和y轴
-webkit-perspective-origin:50% 50%;//浏览器的正中央

使用transform属性调整元素
-translate 位移操作
- translateX( x px )
- translateY( y px )
- translateZ( z px )
-rotate 旋转操作
- rotateX( x deg )
- rotetaY( y deg )
- rotateZ( z deg )
事实我们要使用transform属性也可以设置成2d所以使用之前要写下面一句代码表示使用3d
-webkit-transform-style:-webkit-preserve-3d;
查看全部

0 采集收起来源：创建3D场景
2021-03-12
白灼蘸酱油
transition
两行写法：
    -webkit-transition-property:color;
    -webkit-transition-duration:1s;
一行写法：
    -webkit-transition:color 1s;
多个属性的过度效果
    方法1：-webkit-transition:<属性1> <时间1>,<属性2> <时间2>, ...;
    方法2：-webkit-transition:<属性1> <时间1>；
                -webkit-transition:<属性2> <时间2>；
关于transition的额外属性
一行写法：
    transition:<过度属性名称> <过度时间> <过度模式>
多行写法：
    transition-timing-funtion
过度模式的属性值:
- ease：缓慢开始，缓慢结束（默认，也就是没有设置过度模式的属性值的时候）
- linear：匀速
- ease-in：缓慢开始
- ease-out：缓慢结束
- ease-in-out：缓慢开始，缓慢结束（和ease稍有区别）
查看全部

0 采集收起来源： CSS3中transition效果分析
2021-03-12
白灼蘸酱油

CSS3的动画功能
transition：
    从一个属性值平滑过渡到另一个属性值
    transition:<过度属性名称> <过度时间>
    注意：
    chrome 、safari：-webkit-transition
    firefox:-moz-transition
    opera:-0-transition
animation：
    支持通过关键帧的技术在网页上产生更加复杂的动画效果

查看全部

0 采集收起来源： CSS3中transition
2021-03-12
慕虎3123777

还没看视频，自己写了下。
<!DOCTYPE html>
<html>
    <head>
        <title>动画</title>
        <style>
            #ex{
                -webkit-perspective: 800;
                -webkit-perspective-origin: 50% 50%;
                -webkit-transform-style: -webkit-preserve-3d;
            }
            .block{
                display: flex;
                width: 100vw;
                height: 100vh;
                margin: 0 auto;
                position: relative

            }

            .kuai{
                width: 200px;
                height: 200px;
                background-color: #000;
                text-align: center;
                line-height: 200px;
                color:#fff;
                font-size: 80px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -100px;
                margin-top: -200px;
                transition: -webkit-transform 1.5s;
            }
            #font2, #font3, #font4, #font5, #font6{
                -webkit-transform-origin: center bottom;
                -webkit-transform: rotateX(90deg);
            }
        </style>
    </head>
    <body>
        <div id="ex">
            <div class="block">
                <div id="font6" class="kuai">6</div>
                <div id="font5" class="kuai">5</div>
                <div id="font4" class="kuai">4</div>
                <div id="font3" class="kuai">3</div>
                <div id="font2" class="kuai">2</div>
                <div id="font1" class="kuai">1</div>
                <button id="pre">pre</button>
                <button id="last">last</button>
            </div>
        </div>
        <script>
            let pre = document.getElementById("pre");
            let last = document.getElementById("last");
            let flag = 1
            pre.onclick = function () {
                if (flag == 6) {
                    return;
                }
                let nextflag = flag + 1
                let current = document.getElementById("font" + flag);
                let next = document.getElementById("font" + nextflag);
                current.style = "-webkit-transform-origin: center bottom; -webkit-transform: rotateX(-90deg);"
                next.style = "-webkit-transform-origin: center bottom; -webkit-transform: rotateX(0deg);"
                flag = flag + 1
            }

            last.onclick = function () {
                if (flag == 1) {
                    return;
                }
                let nextflag = flag - 1
                let current = document.getElementById("font" + flag);
                let next = document.getElementById("font" + nextflag);
                current.style = "-webkit-transform-origin: center bottom; -webkit-transform: rotateX(90deg);"
                next.style = "-webkit-transform-origin: center bottom; -webkit-transform: rotateX(0deg);"
                flag = flag - 1
            }
        </script>
    </body>
</html>

查看全部

0 采集收起来源：创建3D动画效果结构部分
2021-03-04
论斤烤 01:57

3D动画原理

查看全部

0 采集收起来源：创建3D动画效果结构部分
2020-11-23
洛洛洛洛洛

给父元素设置
perspective: 800;（近大远小的视距，通常设置为800）
perspective-origin: 50% 50%; （设置视距的中心）
transform-style: preserve-3d;（父元素设置该值时子元素按3d风格展示）
子元素可以进行位移或旋转
transform: translateX(xpx)
transform: translateY(ypx)
transform: translateZ(zpx)
transform: rotateX(xdeg)
transform: rotateY(ydeg)
transform: rotateZ(zdeg)

查看全部

0 采集收起来源：实际创建3D场景
2020-05-20
qq_流目青酒
3D场景
- -webkit-perspection: 元素距离屏幕像素;
- -webkit-perspection-origin: (x轴, y轴);
- transform:
  - translateX(x px)、translateY(y px)、translateZ(z px)
  - rotateX(x deg)、rotateY(y deg)、rotateZ(z deg)
- -webkit-transform-style:-webkit-preserve-3d;
查看全部

0 采集收起来源：创建3D场景
2019-12-05
qq_流目青酒

transition: <过渡属性名称> <过渡时间> <过渡模式>
transition-timing-function: <过渡模式>
ease、linear、ease-in、ease-out、ease-in-out

查看全部

0 采集收起来源： CSS3中transition效果分析
2019-12-05
旅途35

悬停动态旋转

查看全部

0 采集收起来源：实际创建3D场景
2019-12-05
qq_流目青酒
css3动画功能：
- transition: <过渡属性名称> <过渡时间>
  - webkit-transition、-moz-transition、-o-transition
- animation
查看全部

0 采集收起来源： CSS3中transition
2019-12-05
pinzaghi 01:25

一张竖立，其他图片平躺

查看全部

0 采集收起来源：创建3D动画效果结构部分
2019-11-22
pinzaghi 00:51

可调整的旋转中心的位置

查看全部

0 采集收起来源：transform属性
2019-11-22
pinzaghi 00:23

transform-origin属性调整旋转的中心，默认为物体的正中心

查看全部

0 采集收起来源：transform属性
2019-11-22
pinzaghi 02:28

设置transform-style表示以3d形式处理元素

查看全部

0 采集收起来源：实际创建3D场景
2019-11-22
pinzaghi 04:26

三维中，x、y、z三个坐标轴的方向

查看全部

0 采集收起来源：创建3D场景
2019-11-22
pinzaghi 03:29

transform属性表示物体的平移与旋转

查看全部

0 采集收起来源：创建3D场景
2019-11-22
pinzaghi 02:18

perspective-origin属性表示视点的位置

查看全部

0 采集收起来源：创建3D场景
2019-11-22
pinzaghi 01:40

perspective代表物体距离窗口的距离

查看全部

0 采集收起来源：创建3D场景
2019-11-22
pinzaghi 03:14

五种过渡模式，线性过渡或是非匀速过渡

查看全部

0 采集收起来源： CSS3中transition5种效果
2019-11-21
pinzaghi 01:15

为多个属性设置过渡效果的方法

查看全部

0 采集收起来源： CSS3中transition效果分析
2019-11-21
pinzaghi 03:34

不同浏览器的transition需要不同的前缀

查看全部

0 采集收起来源： CSS3中transition
2019-11-21
pinzaghi 02:33

transition包括两个参数，过渡属性名称、过渡时间

查看全部

0 采集收起来源： CSS3中transition
2019-11-21