Web前端开发——html5+css3进阶

最新推荐文章于 2024-05-21 13:46:15 发布

Wyyyy1024

最新推荐文章于 2024-05-21 13:46:15 发布

阅读量300

点赞数 1

分类专栏：前端移动与开发

本文链接：https://blog.csdn.net/weixin_44389562/article/details/108297079

版权

前端移动与开发专栏收录该内容

22 篇文章 6 订阅

订阅专栏

CSS3-2D转换——transform

转换(transform)是css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放。
2D转换是改变标签在二维平面上的位置和形状的一种技术。
位移(transalte)
旋转(rotate)
缩放(scale)

2D转换——位移(translate)

可以改变元素在页面中的位置，类似定位
单位: 像素px，百分比%

transform:transalte(x,y);
transform:transalteX();
transform:transalteY();

特点：

定义2D转换中的移动，沿着X和Y轴移动元素。
最大的优点：不会影响其他元素的位置
translate中的百分比是相对于自身元素transform:transalte(50%,50%);
对行内块元素没有效果。

让盒子实现水平垂直居中

<style>
        div {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 50px auto;
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: deeppink;
            transform: translate(-50%, -50%);
        }       
    </style>
<body>
    <div>
        <p></p>
    </div>
</body>

2D转换——旋转(rotate)

元素在二维平面上顺时针或者逆时针旋转
单位：deg；
transform:rotate();
特点：

rotate度数单位 deg
角度为正数时为顺时针旋转，负数时为逆时针旋转
默认旋转中心点是元素的中心点，默认是Z轴转动

设置中心点转换

transform-origin:(x y);
单位：像素px，百分比%，方位名词(left,right,top,bottom,center)
注意：

x,y之间用空格隔开。
默认中心transform-origin:(50% 50%);

2D转换——缩放(scale)

元素进行缩小或者放大
transform:scale(x,y);

x,y之间用逗号分隔开里面的数字不加单位
transform:scale(1,1);宽高都放大一倍没有效果
transform:scale(2);宽高等比例放大两倍
transform:scale(0.5);数值小于1为缩小，等比例缩小
scale最大的优势：可以设置中心点缩放，不会影响其他盒子。

2D转换综合写法

transform:translate() rotate() scale();

其顺序会影响转换效果(先旋转会改变坐标方向)
当我们同时有位移和其他属性时，一定把位移放到前面。

CSS3动画——animation

动画(animation)是CSS3具有颠覆性的特征之一，可以设置多个节点来精确控制一个或者一组动画
相比过渡，动画可以实现更多变化，更多控制，连续自动变化播放等效果
分两步:
1.先定义动画
2.在调用动画

用@keyframes定义动画

 @keyframes move {
            /* 开始 */
            0% {
                transform: translateX(0px);
            }
            /* 结束 */
            100% {
                transform: translate(1000px, 50px);
            }
        }

调用动画

 div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }

动画序列

0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

动画属性

值	描述
@keyfarmes	规定动画
animation	所有动画属性的简写
animation-name	动画属性的名称
animation-duration	规定动画属性完成一个周期所需要的时间
animation-timing-function	规定动画运动的曲线
animation-delay	规定动画何时开始的时间
animation-iteration-count	规定动画被播放的次数默认是1 无限是infinite
animation-direction	规定动画的下一周期是否逆向播放默认normal 逆向为alternate
animation-fill-mode	规定动画结束后的状态保持forwards回到起始backwards
animation-play-state	规定动画是否暂停(一般与hover搭配，不能写在复合属性中)

动画属性简写

animation：动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;

速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps()	指定了时间函数中的间隔数量（步长）

CSS3 3D转换

近大远小
物体后面遮挡不可见

三维坐标系

X轴：水平向右     X右边是正值，左边负值
Y轴：垂直向上     Y下边是正值，上边负值
Z轴：垂直向外     Z外边是正值，里边负值

3D位移——transform

3D移动在2D移动的基础上多加了一个可以移动的方向，z轴方向。
transform:transalteX();
transform:transalteY();
transform:transalteZ();
transform:transalte(x,y,z);其中xyz不可省略没有就写0；

透视perspective

想要在网页上产生3D效果就需要透视
单位：px像素
透视是要写到父盒子上的其子盒子受影响。
距离视觉点越近平面成像越大，越远越小。

3D旋转——rotate3d

3D旋转可以在三维平面内沿着x轴，y轴，z轴或者自定义旋转。
transform:rotateX();
transform:rotateY();
transform:rotateZ();
transform:rotate3d(x,y,z,deg);

xyz表示旋转轴的矢量是标示你是否希望沿着该轴旋转，最后一个标示旋转角度。
transform:rotate3d(1,0,0,45deg);沿着x轴旋转45deg
transform:rotate3d(1,1,0,45deg);沿着xy轴的对角线旋转45deg

3D呈现——transfrom-style(重要)

控制子元素是否开启三维立体环境
transform-style:flat;子元素不开启3d立体空间，默认。
transform-style:preserve-3d;子元素开启立体空间
代码写给父盒子，其影响到的是子盒子。

Wyyyy1024

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发——html5+css3进阶

CSS3-2D转换——transform转换(transform)是css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放。2D转换是改变标签在二维平面上的位置和形状的一种技术。位移(transalte)旋转(rotate)缩放(scale)2D转换——位移(translate)可以改变元素在页面中的位置，类似定位单位: 像素px，百分比%transform:transalte(x,y);transform:transalteX();transform:transalteY()
复制链接

扫一扫