3D变形tranform（附实例、图解）

最新推荐文章于 2022-10-08 19:39:46 发布

曾吹雨

最新推荐文章于 2022-10-08 19:39:46 发布

阅读量1.4k

点赞数 1

文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_45135068/article/details/107726787

版权

旋转rotate
透视perspective
translateZ
translate3d
动画 animation

前言

css中三个方向的设定为：
X左边是负值，右边是正值
Y上边是负值，下边是正值
Z里面是负值。外面是正值

正文

旋转rotate

rotateX(); 沿x轴旋转
RotateY(); 沿y轴旋转
RotateZ(); 沿z轴旋转

透视perspective

透视原理：近大远小
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

在这里插入图片描述

例子：

 body {
            perspective: 1000px;   /*视距  距离 眼睛到屏幕的距离*/
        }
img:hover {
            transform: rotateY(60deg);
        }

在这里插入图片描述

translateZ

TranslateZ的直观表现形式就是大小变化，实质是XY平面相对于视点远近变化（参照物为perspective属性）。比如说设置了perspective为200px，那么transformZ的值越接近200，就是离得越近，看上去也就越大，超过200就看不到了，相当于跑到后脑勺去。

在这里插入图片描述

透视是眼睛到屏幕的距离透视只是一种展示形式是有3d效果的意思
translateZ 是物体到屏幕的距离 Z 就是来控制物体近大远小的具体情况
translateZ 越大，我们看到的物体越近，物体越大

translate3d

相当于和写

transform: translate3d(x,y,z); x跟y可以是px也可以是%，但是z只能是px

动画 animation

<’ animation-name '>：检索或设置对象所应用的动画名称
<’ animation-duration '>：检索或设置对象动画的持续时间
<’ animation-timing-function '>：检索或设置对象动画的过渡类型
<’ animation-delay '>：检索或设置对象动画延迟的时间
<’ animation-iteration-count '>：检索或设置对象动画的循环次数
<’ animation-direction '>：检索或设置对象动画在循环中是否反向运动
<’ animation-fill-mode '>：检索或设置对象动画时间之外的状态
<’ animation-play-state '>：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

例子：

animation: azhumei 2s ease 0s infinite;  /*引用动画*/
            /* 动画名称是自定义的   */
            /* infinite  无限循环 */
            /* 一般情况下，我们就用前2个 animation: azhumei 2s； */
/* @keyframes 动画名称 {} 定义动画 */
        @keyframes azhumei{
            0% {   /*起始位置  等价于刚才的 from*/
                transform: translate3d(0,0,0);
            }
            
            25%{
                transform: translate3d(800px,0,0);
            }

            50% {
                transform: translate3d(800px,400px,0);
            }

            75% {
                transform: translate3d(0,400px,0);
            }

            100% {
                transform: translate3d(0,0,0);   /*相当于结束*/
            }
        }