H5+CSS3之变型

变型
核心属性： transform
transform 变型
transformer 变形金刚

一个盒子可以携带多个变型，多个变型之间以空格分隔。
变型变的是坐标系，下一个变型是在上一个变型完成后，再进行变型。当最后一个变型完成之后，坐标系恢复原状。

1 二维变型
1.1 旋转变型
transform: rotate(deg) //deg是degree的前三个字母表示度数
如果参数写正值，表示顺时针，或者说，由x轴正向向y轴正向旋转。
如果参数写正值，表示逆时针，或者说，由x轴正向向y轴负向旋转。
Eg:transform:rotate(45deg);

1.2 斜切变型
transform:skew(y轴正向向x轴正向靠拢的角度, x轴正向向y轴正向靠拢的角度);

1.3 缩放变型
transform:scale(x轴缩放的比例, y轴缩放的比例);

缩放的比例不可以写百分属性，可以写为小数。
PS：参数可以只写一个，此时表示x轴和y轴都按照该比例缩放。

1.4 位移变型
transform:translate(x轴正向平移的距离, y轴正向平移的距离)

平移距离的单位可以写px | %

PS：如果写百分比，那么这个平移的百分比是相对于元素本身的，不是相对于其父级的。

1.5 综合案例
抽奖大转盘转的度数与点击次数的关系：

1.6 变型中心点控制
默认地，元素的变型中心点为元素的正中心。
我们可以通过transform-origin来控制变型中心点。
transform-origin: 变型中心点的横坐标变型中心点的纵坐标;

变型中心点的坐标单位：px | % | 方位名词

transform-origin需要给元素的默认样式加。

transform-origin:200px 200px;
transform-origin:left top;
transform-origin:0 80%;

2 三维变型
三维变型，需要加景深。
景深，又叫透视，表示人眼距离舞台的距离。这样就会产生近大远小、近实远虚的透视效果。
perspective: px; //人眼距离舞台的距离
PS: 透视需要给演员所在的舞台加，不要给演员加。

2.1 旋转变型
默认，transform:rotate()是垂直屏幕的Z轴旋转的。
Ps：旋转时轴也跟着相应旋转。

旋转轴向说明
transform:rotate() 默认是绕z轴旋转
transform:rotateZ(deg) 绕Z轴旋转
如果写正值，表示由x轴正向向y轴正向旋转。如果写负值，表示由x轴正向向y轴负向旋转。

transform:rotateX(deg) 绕X轴旋转
如果写正值，表示由y轴正向向z轴正向旋转。如果写负值，表示由y轴正向向z轴负向旋转。

transform:rotateY(deg) 绕Y轴旋转
如果写正值，表示由z轴正向向x轴正向旋转；如果写负值，表示由z轴正向向x轴负向旋转。

总结：
过渡动画的核心属性：
transition: 发生过渡动画的属性名动画的时长缓动曲线延迟时间;

哪些属性可以发生过渡动画：凡是有值可以转化为数字的属性都可以发生过渡动画。甚至在chrome中，背景图也可以发生过渡动画。

旋转变型：
transform:rotate(deg)
transform:skew(y轴向x轴靠拢的角度, 由x轴向y轴靠拢的角度)
transform:scale(x轴缩放的比例, y轴缩放的比例)
缩放的比例不可以用百分比，可以写为小数。可以只写一个参数，表示x轴和y轴都按照这个比例缩放。
transform:translate(x轴正向的位移, y轴正向的位移)

一个盒子可以携带多个变型，多个变型之间以逗号分隔。变型变的是坐标系。下一个变型是在上一个变型的基础上再进行变型。当最后一个变型完成后，坐标轴恢复原状。

变型中心点控制：
transform-origin: 变型中心点的横坐标变型中心点的纵坐标
变型中心点的坐标单位：px |方位名词 | %。

3D旋转：（旋转时轴也跟着相应旋转）
transform:rotate(deg) 默认是绕垂直屏幕的Z轴进行旋转
transform:rotateZ(deg) 绕z轴进行旋转
transform:rotateX(deg) 绕x轴进行旋转
transform:rotateY(deg) 绕y轴进行旋转

backface-visibility:hidden; 背面不可见

2.2 位移变型
transform: translate(x轴正向的位移, y轴正向的位移); 2D的位移
transform: translate3D(x轴正向的位移, y轴正向的位移, z轴正向的位移); 沿x轴、y轴、z轴方向的位移
transform: translateX(x轴正向的位移) 沿x轴方向的位移
transform: translateY(y轴正向的位移) 沿y轴方向的位移
transform: translateZ(z轴正向的位移) 沿z轴方向的位移

2.3 构建立方体
立方体需要加属性：
transform-style: flat | preserve-3d;
transform-style:flat; 默认值，让该元素里面的子元素以2D平面的形式呈现
transform-style:preserve-3d; 让该元素里面的子元素以三维立体的形式呈现
preserve pre(在前，向前) + serve（服务）保护，维护，保存

transform-style一定要给立方体加，不要给立方体的面加。
要注意旋转时轴也会跟着旋转，所以要看是先旋转还是先位移，根据具体情况具体分析。

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>正方体</title><style>* {margin: 0;padding: 0;}ul li {list-style: none;}.box {width: 600px;height: 600px;background: #eee;margin: 0 auto;position: relative;perspective: 800px;}.box ul {width: 300px;height: 300px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;transform-style: preserve-3d;transition: all 5s;}.box ul:hover {transform: rotateX(360deg) rotateY(360deg);}.box ul li {width: 300px;height: 300px;text-align: center;line-height: 300px;font-size: 48px;position: absolute;backface-visibility: hidden;}.box ul li:nth-child(1) {background: rgba(114, 67, 67, 0.5);transform: rotateX(90deg) translateZ(150px);}.box ul li:nth-child(2) {background: rgba(0, 255, 0, .5);transform: rotateX(-90deg) translatEZ(150px);}.box ul li:nth-child(3) {background: rgba(0, 0, 255, .5);transform: rotateY(-90deg) translateZ(150px);}.box ul li:nth-child(4) {background: rgba(255, 0, 255, .5);transform: rotateY(90deg) translateZ(150px);}.box ul li:nth-child(5) {background: rgba(255, 255, 0, .5);transform: rotateY(0deg) translateZ(150px);}.box ul li:nth-child(6) {background: rgba(0, 255, 255, .5);transform: rotateY(180deg) translateZ(-150px);}</style>
</head><body><div class="box"><ul><li>上</li><li>下</li><li>左</li>在这里插入代码片<li>右</li><li>前</li><li>后</li></ul></div>
</body></html>

2.4 透视点控制
透视点表示人眼看物体的位置。
透视点控制的属性：
perspective-origin: 透视点的横坐标透视点的纵坐标;
透视点的坐标：px | % | 方位名词;

默认值： perpspective-origin:center center;

透视点需要加舞台加。
5.2.5 案例
backface-visibility:hidden; //背面不可见

clip:rect(上, 右, 下, 左); 依据上, 右, 下, 左的顺序，根据该元素左上角为作为(0,0)计算的偏移量，来进行裁切。作用：对前景进行裁切。css2中的属性
clip需要配合绝对定位（position:absolute）一起使用。

rect 是rectangle的缩写，表示矩形

background-clip 背景裁切

当单击向后按钮的时候，下一个状态的类名为：为前一个状态的类名中，把最后一个放到最前面。所以我们最好把所有的类名放到一个数组里面，这样方便操作。

H5+CSS3之变型相关推荐

登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
h5+css3简单实现网页端五子棋游戏1.0版
H5+css3简单实现五子棋游戏原理主要使用H5的拖拽接口功能,通过拖拽移动棋子,目标位置通过接收拖拽棋子的拷贝元素,实现棋子摆放. 效果图如下步骤第一步:简单排版五子棋游戏页面,设定好棋盘排 ...
android窗帘拉开动画,H5+CSS3窗帘拉开收起动画特效源码
效果图今天给大家带来了一个简单的特效源码 H5+CSS3窗帘拉开收起动画特效源码废话不多说,上源码! html { box-sizing: border-box; } *, *::after, * ...
想学好前端 H5 CSS3 的小朋友们康康我~
嗨喽,各位亲爱的 CSDN 小伙伴们,欢迎来到实力至上主义的教室(简单为喜欢的动漫打个小广告). 以下呢是我对前端 H5 & CSS3 常用知识点历时两个多月的倾心整理,内容简练,通俗易懂(比 ...
H5+CSS3移动商城界面.七天从零实战课程-信息_详情
欢迎大家收看我的视频课程:H5+CSS3移动商城界面.七天从零实战课程黄老师QQ:45157718 ,前端交流群群 147415688 https://edu.csdn.net/course/det ...
H5 CSS3特性实现动画效果
H5 CSS3特性制作动画曾手写纯js实现过轮播图,那会挺费劲的,更别提动画了,现在CSS3让这一步变得越来越简单了一,开始准备材料一张雪碧图(足够了) 手撕代码创建文件 animation ...
登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面
使用H5+css3+js实现带验证码的登录页面发布时间:2020-10-28 19:51:18 来源:亿速云阅读:151 作者:Leah 本篇文章为大家展示了使用H5+css3+js实现带验证码的 ...
php窗帘excel,H5+CSS3逼真的窗帘拉开收起动画特效
H5+CSS3逼真的窗帘拉开收起动画特效 html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; ...
[H5]CSS3样式(背景、文本、字体、链接、列表、表格和轮廓)
[H5]CSS3样式(背景.文本.字体.链接.列表.表格和轮廓) [index.html] <!DOCTYPE html> <html lang="en"> ...

H5+CSS3之变型

H5+CSS3之变型相关推荐

最新文章

热门文章