手机编码制网站,广告公司好听的名字,google网站提交,广西建设网行业版空间转换 空间#xff1a;是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间#xff0c;Z 轴位置与视线方向相同。 空间转换也叫 3D转换 属性#xff1a;transform 平移
/*单独设置 z轴效果不明显*/
transform: translate3d(x, y, z);
transform: translateX(…空间转换 空间是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间Z 轴位置与视线方向相同。 空间转换也叫 3D转换 属性transform 平移
/*单独设置 z轴效果不明显*/
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ(); 取值正负均可 像素单位数值 百分比参照盒子自身尺寸计算结果 提示 默认情况下Z 轴平移没有效果 视距 perspective 作用指定了观察者与 Z0 平面的距离为元素添加透视效果 透视效果近大远小、近实远虚 属性( 添加给父级取值范围 800-1200) 旋转
配合 视距perspective800~1200 效果更佳哦 /*绕着z轴而转 方向顺时针*/
transform: rotateZ(值deg);
/*绕着x轴而转 方向向里面*/
transform: rotateX(值deg);
/*绕着y轴而转 方向向里面*/
transform: rotateY(值deg); 左手法则 – 根据旋转方向确定取值正负 左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向 立体呈现 – transform-style
作用设置元素的子元素是位于 3D 空间中还是平面中 属性名transform-style 属性值 flat子级处于平面中 preserve-3d子级处于 3D 空间 /*给父级元素*/
transform-style: preserve-3d; 呈现立体图形步骤 1. 父元素添加transform-style: preserve-3d 2. 子级定位 3. 调整子盒子的位置位移或旋转 提示 : 空间内转换元素都有自已独立的坐标轴互不干扰 旋转改变了原有的坐标轴向 缩放
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();
动画 animation
过渡实现两个状态间的变化过程 动画实现多个状态间的变化过程动画过程可控重复播放、最终画面、是否暂停 /*定义动画:第一种*/
keyframes 动画名称 {from{}to{}
}
/*定义动画:第二种*/
keyframes 动画名称 {
/*百分比表示 动画时长的百分比*/0% {}10%{}......100%{}
}使用动画 animation:动画名称 动画时长s 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
速度曲线linear 匀速运动
分布动画steps() 配合精灵图使用提示 动画名称和动画时长必须赋值 取值不分先后顺序 如果有两个时间值第一个时间表示动画时长第二个时间表示延迟时间 /* 动画时长 */
animation-duration: 1s;/* 播放次数 */
animation-iteration-count: infinite;
.box:hover {/* 暂停动画 */animation-play-state: paused;}
多组动画
animation:动画1动画2动画n
;
animation:
run 1s steps(12) infinite,
move 3s linear forwards
;
img {/*图片为行内元素不能设置宽高要变为块元素切记 */display: block;width: 200px;}
