CSS中动画——Z轴平移,旋转,缩放
一、Z轴平移
z轴平移,调整元素在z轴的位置,正常情况下调整元素和人眼之间的距离,距离越大,元素离人越近,z轴平移属于立体效果(近大远小),默认情况下网页不支持透视,如果需要看到效果,必须要设置网页的视距
1:设置视距
—perspective [pə'spektiv] 设置当前网页的视距为800px,人眼距离网页的距离,一般不小于600px
—设置方式一
html{ perspective: 800px; }
—设置方式二:
—perspective(800px) 谷歌要直接设置在transform里面
选择器{/*perspective(800px) 谷歌要直接设置在transform里面 */
transform: perspective(800px) translateZ(100px); }
2:代码演示
<!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>/* perspective [pə'spektiv] 设置当前网页的视距为800px,人眼距离网页的距离,一般不小于600px *//* html{ perspective: 800px; } */body {border: 1px solid red;}.box1 {width: 200px;height: 200px;background-color: #bfa;margin: 100px auto;transition: 1s;}body:hover .box1 {/*perspective(800px) 谷歌要直接设置在transform里面 */transform: perspective(800px) translateZ(100px);}</style></head><body><div class="box1"></div></body>
</html>
二、旋转
1:旋转
通过旋转可以使元素沿着x y或者z旋转指定的角度
—条件:需要提前设置视距
—语法:transform: rotateY() ;
—可选值
rotateX() 沿着x轴旋转
rotateY() 沿着y轴旋转
rotateZ() 沿着z轴旋转
—参数: deg 度 turn 圈
— backface-visibility: ; 设置是否显示元素的背面
可选值:visible 默认值,显示
hidden 不显示
2:代码演示如下
<!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>/* 设置当前网页的视距为800px,人眼距离网页的距离,一般不小于600px *//* html{perspective: 800px;} */.box1{width: 200px;height: 200px;background-color: #bfa;margin: 100px auto;transition: 2s;}body:hover .box1{transform: perspective(800px) rotateY(-45deg) ;backface-visibility: hidden; }</style>
</head>
<body><div class="box1"></div>
</body>
</html>
三、缩放
1:缩放
transform: ; [skeil] 对元素进行缩放的函数
—可选值
scale()双方向缩放
scaleX() x轴方向缩放
scaleY() y方向缩放
—变形的原点 默认值center,可通过transform-origin:;改变原点
参数:数值1 数值2
2、代码演示
<!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>.box1{width: 100px;height: 100px;background-color: #bfa;margin: 0 auto;margin-top: 100px;transition: 2s;}.box1:hover{/* 变形的原点 默认值center */transform-origin: 0px 0px;transform:scale(2)}/* 需求:设置图片放大效果 */.img-wrapper{width: 200px;height: 200px;border: 1px red solid;overflow: hidden;}.img-wrapper:hover img{transform: scale(1.2);}img{transition: all 1s;}</style>
</head>
<body><div class="box1"></div><div class="img-wrapper"><img src="./1.jpeg" alt=""></div>
</body>
</html>
CSS中动画——Z轴平移,旋转,缩放相关推荐
- CSS中变形效果-transform(平移、旋转、缩放、倾斜)
CSS中变形效果-transform(平移.旋转.缩放.倾斜) CSS3实现变形的优势 2-D变形 平移translate() 1.缩放scale() 2.倾斜skew() 3.旋转rotate() ...
- android 动画x轴旋转,android – 动画在视图之间转换,在z轴上旋转...
我正在尝试创建一个动画来在两个视图之间转换,这两个视图都是ExpandableListViews.我想要的外观如下图所示. 我尝试使用shrink_to_middle和grow_from_middle ...
- Unity 触屏手势控制Camera平移旋转缩放
Unity 触屏手势控制Camera平移旋转缩放 实现思路 单点触屏,位移增量控制相机平移: 两点触屏,两点位移控制相机前后移动(缩放):两点中一点不位移控制相机绕点旋转: 实现需要的API Touc ...
- OpenGL中的平移旋转缩放
1.opengl中缩放使用的函数是glScalef 其原型为void glScalef(GLfloat x, GLfloat y, GLfloat z); 该函数表示模型在各轴上进行扩大和缩 ...
- 三维空间中的几何变换-平移旋转缩放
前言 前段时间由于项目需要,深入学习了下图形几何变换,主要是绕任意轴旋转部分(其他的已有一定基础),现记录学习笔记. 文章内容部分引用并参考了下面的博客: http://netclass.csu.ed ...
- osg中使用MatrixTransform来实现模型的平移/旋转/缩放
MatrixTransform是从Transform - Group继承而来,因此可以在它的下面挂接Node对象. 通过设置其矩阵,来实现其下子节点的模型变换. -- 用局部坐标系来理解(局部坐标系又 ...
- WebGL编程指南-24 同时使用漫反射光和环境反射光、立方体平移旋转缩放变换时漫反射光和环境反射光处理
1.demo效果 此效果是上一章绘制的立方体基础上,向Y轴方向平移一个单位,然后绕Z轴旋转30度. 如上图,归纳一下物体坐标变换法向量变化的规律如下 平移变换, 法向量不会改变 旋转变换, 大多数情况 ...
- 三维坐标 偏转_三维坐标变换原理-平移, 旋转, 缩放
给定一个二维点(x, y),那么形如(kx, ky, k)的所有三元组就都是等价的,它们就是这个点的齐次坐标(homogeneous).齐次坐标就是将一个原本是n维的向量用一个n+1维向量来表示,是指 ...
- 三维坐标要建一个4*4的矩阵?平移 旋转 缩放
移植不知道三维物体的旋转平移缩放和矩阵的关系.找到这篇文章借鉴一下. 转自:https://blog.csdn.net/ALLENJIAO/article/details/80348362 怎么平移一 ...
最新文章
- PolarDB数据库性能大赛:95后徐妈的经验分享
- 2!=5 or 0在python中是否正确-Python 中的 or and 运算,看这一篇就够
- CentOS7.2 安装Squid3.5及正、反向代理设置
- Silverlight从客户端上传文件到服务器
- matlab wc wp,数字信号处理MATLAB习题.PDF
- 如何解决Mybatis里mapper文件中关于不能用大于小于号
- 【Breadth-first Search 】515. Find Largest Value in Each Tree Row
- 暑训day1解题报告
- tuxedo错误码6_TUXEDE返回的所有错误代码
- 使用Java实现发送email邮件
- mysql更换主键遇到的一个问题
- linux Centos下磁盘分区及文件系统创建与挂载
- MySQL高级知识(十三)——表锁
- FFT蝶形算法的verilog实现专题——verilog具体实现的考虑
- 农村集体资产产权改革试点将全面展开
- 【量化交易基础】金融相关基础知识
- 全网最优质的电子书资源下载网站,每一个都让你爽翻天!
- 用VC实现Html编辑器
- 阅读《时间,管理把握最宝贵的财富》摘录(1)
- 开源免费企业平台Odoo的简介和应用