CSS3——transform
属性值可点击跳转
transform
属性值有:
rotate: (旋转)
rotate( );2D
rotateX( );
rotateY( );
rotateZ( );
rotate3D( );
括号里面正常都是填角度值(deg)
origin:(起源中心点)
origin是为旋转的设置以哪个点旋转的
origin(0,0)就是以左上角的点为中心旋转,还可以设置(center,center)就是以图片的中心点旋转
其实就是X跟Y,可以根据自己需求设置
scale:(伸缩)
伸缩的是此元素的变化坐标轴的刻度,不是元素的大小
scaleX( );
scaleY( );
scaleZ( );
scale3D( ); 就是x、y、z三个的和,就是scale3D(x,y,z)
skew:(倾斜)
skewX( );
skewY( );
translate:(转变)
translateX( );
translateY( );
translateZ( );
tramslate3D( );
景深
perspective:
perspective-origin:
transform-style: preserve-3d
----------------------------------分界线--------------------------------------
然后我们一起来了解一下什么是transform,是怎么使用的
rotate()
调节deg的值就可旋转图片,我们注意到它旋转是以图片的中心点为旋转的中心点的
我们来设置一下origin(0,0),就是以左上角为中心旋转点旋转的
我们上面看到的效果都是为2D效果的,接下来我们来了解3D效果
rotateX( );
想要设置3D效果,需要先在旋转元素的父级上添加这些东西子元素才会以3D的效果展示, 这个后面会详细讲解的
现在来看看X轴的3D效果
rotateY( );
再来Y轴的3D效果
rotateZ( );
再来看看Z轴,Z轴就是相当于立体的面向我们的轴,,,就跟有人拿着剑指着你一样,剑就是Z轴
注意点当你设置多个旋转轴的时候,你旋转第一个轴,元素所参照的坐标轴也会跟着一起旋转的
看一下动图
我们要记得,旋转的角度一样,顺序不一样,结果也是不一样的。
rotate3D( X, Y ,X ,deg);
首先是先设置一个矢量 / 向量。
X,Y,Z绘制的是空间的矢量图,设置的是比值,而不是角度
我们来看看是怎么使用的:
(平面轴)不涉及Z轴
我们设置的值是1 :1:0,方向是45度
。
这个轴的方向就是这个方向
(空间轴)
我们再设置1:1:1看看是什么样的
取B点这条线做3D旋转
我们可以看到,图片是围绕着B点这条轴旋转的
scale
scaleX(), scaleY(), scaleZ()
可以直接写成 scale(X, Y, Z)
里面是直接填数字,比1大是伸,比1小是缩
注意点:
伸缩轴会随着元素的旋转而旋转
先设置scale后设置rotate
先设置rotate后设置scale,随着旋转元素的Y轴是会变形的
scaleZ()
就迎面往前的方向
skew
skew(x, y)以X轴Y轴倾斜。是以元素坐标轴倾斜的
translate
以自身为参考坐标
translateX:
traslateY()
X,Y一起使用
translate还有一个很好用的小技巧
就是可以在不知道自己自身宽高的情况下实现居中
translateZ()
我们先把图片旋转为Y轴80度,方便我们观看Z轴的变化
以上的translat设置的都是为2D视角的
现在我们来了解一下3D
景深
就是我们上面用到的东西,需要在父级设置perspective:***px我们子级才会变成3D空间的属性
perspective:
眼睛距离元素的位置距离
perspective-origin:
就是你的眼睛在哪里看的位置,设置你眼睛所在的位置,正常设置X,Y。还可以设置空间位置,X,Y,Z
转载于:https://www.cnblogs.com/yangpeixian/p/11233697.html
CSS3——transform相关推荐
- 基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- css对称旋转,CSS3 transform平面旋转
CSS3 transform平面旋转 1.translate(x,y) 设置盒子位移 2.scale(x,y) 设置盒子缩放 3.rotate(deg) 设置盒子旋转 4.skew(x-angle,y ...
- CSS3 transform
transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x.y之分,比如:rotatex() 和 rotatey() ,以此类推. ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...
- html鼠标悬停盒子凸起,css3 transform动画鼠标悬停div容器凸起放大显示
特效描述:css3 transform动画 鼠标悬停 div容器 凸起放大显示.鼠标悬停div容器凸起放大显示效果 代码结构 1. HTML代码 what? If you want to sell s ...
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞. ...
- html图片旋转3种方式—— CSS3 transform
html图片旋转有3中方式:ie 滤镜,CSS3 transform,HTML5 canvas rotate 参考文章:网页中图片旋转的几种实现方式 CSS3 transform css3 的tra ...
- 360安装 css3插件,Omi官方插件系列 。。支持CSS3 Transform设置
写在前面 Omi框架正式发布了omi-transform作为Omi组件化开发特效运动解决方案,让你轻松在Omi项目里快速简便支持CSS3 Transform设置.先说说 transform.js (n ...
- CSS 变形(CSS3) transform
一.2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前 ...
最新文章
- TCP/IP详解--第十四章
- git-commit
- zabbix入门之添加监控项
- android media apex_APEX英雄主播即将登陆时代广场?人气十强介绍!
- ubuntu14.04+ROS indigo+kinectV1 骨骼点检测
- 5-5图层的链接-新版本不常用
- Codeforces Bubble Cup 8 - Finals [Online Mirror] B. Bribes lca
- 解决使用elementUI框架el-upload跨域上传时session丢失问题
- bzoj 3394: [Usaco2009 Jan]Best Spot 最佳牧场(floyd)
- redis 入门总结
- 基于数据驱动的人脸识别课题研究
- 一文普及工业控制、PLC
- 文献阅读笔记:北极气溶胶与气候
- 2014年度江西省高等学校科技落地计划项目立项名单
- 用Scrapy框架爬取校花网所有校花图片
- Kanban in Action 免积分下载
- 关于redis服务的代码编码
- Endnote 导出中英文参考文献到Word
- android手机传感器总结
- 欧美slots游戏 源码(完整)