变形`transform`：平移、旋转、缩放

变形通过css改变元素的形状或者位置
但不该页面布局

1. 平移

属性

translateX()沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移元素

z轴就是人眼与屏幕的方向

如果用百分比去平移，那百分比是相对于自身计算的

垂直水平居中的方式举例

使用绝对定位

/* 这种居中方式，只适用于元素的大小确定 */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

使用table-cell

/* table-cell的方式具有一定局限性 */
display: table-cell;
vertical-align: middle;
text-align: center;

使用平移

/* transform变形平移的方式 */
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

示例:浮出效果


div {float: left;width: 200px;height: 300px;background-color: silver;margin: 100px 50px auto 50px;transition: all .3s;
}div:hover {box-shadow: 0 0 10px rgba(0, 0, 0, .2);transform: translateY(-5px);
}

z轴平移

z轴就是、调整我们人眼与元素之间的距离

立体效果，近大远小

注意：默认情况网页是不支持透视的，使用z轴平移，必须设置网页的视距

视距在html里面设置，参数是拟定人眼与页面的距离

html {background-color: rgb(71, 44, 32);perspective: 800px;
}

示例

html {background-color: rgb(71, 44, 32);perspective: 800px;
}.box {width: 200px;height: 300px;background-color: silver;margin: 100px auto;transition: all .3s;
}.box:hover {box-shadow: 0 0 10px rgba(0, 0, 0, .2);transform: translateZ(200px);
}

2. 旋转

属性

rotateX() 沿x轴旋转
rotateY() 沿着y轴旋转
rotateZ() z轴旋转

z 轴要开视距

/* transform: rotateY(0.5turn); */
transform: rotateY(180deg);

3. 缩放

对元素进行缩放

scalex() 水平方向缩放
scaley() 垂直方向缩放
scale 水平垂直双方向缩放
transform-origin 变形原点设置

.box {height: 200px;width: 200px;background-color: #bfa;margin: 200px auto;transition: 2s;
}.box:hover {/* transform: scaleX(2); *//* transform: scaleY(2); */transform: scale(2);/* 变形的原点 */transform-origin: 0 0;
}

15 变形`transform`：平移、旋转、缩放相关推荐

Unity 触屏手势控制Camera平移旋转缩放
Unity 触屏手势控制Camera平移旋转缩放实现思路单点触屏,位移增量控制相机平移: 两点触屏,两点位移控制相机前后移动(缩放):两点中一点不位移控制相机绕点旋转: 实现需要的API Touc ...
html文字旋转以后变形,关于css:CSS3中的变形处理transform功能旋转缩放倾斜移动
1 transform属性在CSS3中,能够利用transform性能实现文字或图像的旋转.缩放.歪斜.挪动这4中类型的变形解决. (1)浏览器反对到目前为止:Safari3.1以上.Chrome ...
Unity矩阵平移旋转缩放Matrix4x4
Unity中的矩阵(Matrix4x4) 最近在研究帧同步定点数物理系统中需要自定义定点数矩阵,所以在这里分享下基础的矩阵案例旋转.平移.缩放.(注意这里本文中的transform组件式基于unity ...
三维空间中的几何变换-平移旋转缩放
前言前段时间由于项目需要,深入学习了下图形几何变换,主要是绕任意轴旋转部分(其他的已有一定基础),现记录学习笔记. 文章内容部分引用并参考了下面的博客: http://netclass.csu.ed ...
flutter Transform 矩阵变换（平移旋转缩放）
Transform其子Widget绘制时外面包着矩阵变换(transformation),通过它可以实现各种矩阵操作. 1.widget平移效果图 2.旋转(rotate) 效果图: 3.缩放 Tr ...
三维坐标偏转_三维坐标变换原理-平移, 旋转, 缩放
给定一个二维点(x, y),那么形如(kx, ky, k)的所有三元组就都是等价的,它们就是这个点的齐次坐标(homogeneous).齐次坐标就是将一个原本是n维的向量用一个n+1维向量来表示,是指 ...
Cesium变换3DTiles的位置（平移旋转缩放）
function add3DTilesetDataTrans(url) { //viewer1.scene.globe.depthTestAgainstTerrain = tr ...
WebGL编程指南-24 同时使用漫反射光和环境反射光、立方体平移旋转缩放变换时漫反射光和环境反射光处理
1.demo效果此效果是上一章绘制的立方体基础上,向Y轴方向平移一个单位,然后绕Z轴旋转30度. 如上图,归纳一下物体坐标变换法向量变化的规律如下平移变换, 法向量不会改变旋转变换, 大多数情况 ...
osg中使用MatrixTransform来实现模型的平移/旋转/缩放
MatrixTransform是从Transform - Group继承而来,因此可以在它的下面挂接Node对象. 通过设置其矩阵,来实现其下子节点的模型变换. -- 用局部坐标系来理解(局部坐标系又 ...

15 变形`transform`：平移、旋转、缩放

目录

变形`transform`：平移、旋转、缩放

1. 平移

示例:浮出效果

z轴平移

2. 旋转

3. 缩放

15 变形`transform`：平移、旋转、缩放相关推荐

最新文章

热门文章

15 变形`transform`：平移、旋转、缩放

目录

变形transform：平移、旋转、缩放

1. 平移

示例:浮出效果

z轴平移

2. 旋转

3. 缩放

15 变形`transform`：平移、旋转、缩放相关推荐

最新文章

热门文章

变形`transform`：平移、旋转、缩放