css平移_css 移动_该编程了

网络 02-07 3021

一、变形就是指通过CSS来改变元素的形状或位置

二、平移如何使元素在页面的正中大小不确定，仅被内容撑开)

三、z轴平移（并没有改变元素的大小）

一、变形就是指通过CSS来改变元素的形状或位置 ?变形不会影响到页面的布局?transform 用来设置元素的变形效果?平移：

translateX() 沿着x轴方向平移

translateY() 沿着y轴方向平移

translateZ() 沿着z轴方向平移

平移元素，百分比是相对于自身计算的

transform: translateY(-100px);?

transform: translateX(100%);

多方位平移使用中间用空格隔开

transform: translateX(50px) translateY(-50px);

举个例子

?代码示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background-color: rgba(208, 197, 197, 0.8); } .box1,.box2{ width: 200px; height: 300px; background-color: #fff; float: left; margin: 200px 10px; transition: all .3s; } div:hover{ transform: translateY(-4px); box-shadow: 0px 0px 10px rgba(0,0,0,.3); } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html> 二、平移如何使元素在页面的正中大小不确定，仅被内容撑开)

只需加入以下属性

left: 50%;

top: 50%;

transform: translateX(-50%) translateY(-50%);

三、z轴平移（并没有改变元素的大小）

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果，必须要设置网页的视距。

注：视距是给元素的父元素设置！

举个例子

代码示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ /* 设置当前网页的视距为400px，人眼距离网页的距离 */ perspective: 400px; } div{ width: 200px; height: 200px; margin: 200px auto; background-color: hotpink; transition: 1s; } div:hover{ transform: translateZ(200px); /* 设置为400px，则元素铺满整个网页 */ } </style> </head> <body> <div></div> </body> </html>