CSS3——2D变形(CSS3) transform

流楚丶格念 2021-07-20 03:58:44
html css CSS3


 

2D变形(CSS3) transform

transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform transform 变换 变形的意思 ------------------------------------《 transformers 变形金刚》

移动 translate(x, y)

translate 移动平移的意思
在这里插入图片描述

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置,x、y可为负值;

 translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
translateX(x)仅水平方向移动(X轴移动)
translateY(Y)仅垂直方向移动(Y轴移动)
.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 走的自己的一半 */
}

让定位的盒子水平居中

缩放 scale(x, y)

在这里插入图片描述

transform:scale(0.8,1);

可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%,垂直方向上不缩放。

scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(x)元素仅水平方向缩放(X轴缩放)
scaleY(y)元素仅垂直方向缩放(Y轴缩放)

scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大 1.

旋转 rotate(deg)

可以对元素进行旋转,正值为顺时针,负值为逆时针;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNn5nKV7-1594780042876)(media/1498443651293.png)]

transform:rotate(45deg);

注意单位是 deg 度数

transform-origin可以调整元素转换变形的原点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9fXjowJa-1594780042912)(media/1498443912530.png)]

 div{
transform-origin: left top;
transform: rotate(45deg);
} /* 改变元素原点到左上角,然后进行顺时旋转45度 */

如果是4个角,可以用 left top这些,如果想要精确的位置, 可以用 px 像素。

 div{
transform-origin: 10px 10px;
transform: rotate(45deg);
} /* 改变元素原点到x 为10 y 为10,然后进行顺时旋转45度 */

倾斜 skew(deg, deg)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JlTGSvTu-1594780273182)(media/1498443827389.png)]

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度,处置方向保持不变。

可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0。

案例

总预览

在这里插入图片描述

放大

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大</title>
<style>
div {
width: 386px;
height: 260px;
overflow: hidden;
}
div img {
transition: all 0.5s;
}
div:hover img {
transform: scale(1.1);
}
</style>
</head>
<body>
<div>
<img src="1.jpg" height="260" width="386" alt="">
</div>
</body>
</html>

缩放

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:hover {
/*transform: scale(0.8, 1); 0 0% 1 100% 宽度变为了原来的 80% 高度不变 */
/*transform: scale(1, 0.8); 0 0% 1 100% 宽度变为了原来的 80% 高度不变 */
transform: scale(0.8); /* 高度省略 默认 和 宽度一起缩放 都是 0.8 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

旋转

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.6s;
}
div:hover {
transform: rotate(360deg);
}
img {
transition: all 0.6s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="images/fengche.png" height="585" width="585" alt="">
</body>
</html>

旋转的楚乔特效

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转的楚乔</title>
<style>
div {
width: 250px;
height: 170px;
border: 1px solid red;
margin: 300px auto;
position: relative;
}
div img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
div:hover img:first-child {
transform: rotate(60deg);
}
div:hover img:nth-child(2) {
transform: rotate(120deg);
}
div:hover img:nth-child(3) {
transform: rotate(180deg);
}
div:hover img:nth-child(4) {
transform: rotate(240deg);
}
div:hover img:nth-child(5) {
transform: rotate(300deg);
}
div:hover img:nth-child(6) {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
<img src="images/1.jpg" >
</div>
</body>
</html>

 

版权声明
本文为[流楚丶格念]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_15265965/2892260

  1. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:disabled | :enabled 伪类
  2. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类
  3. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-of-type 伪类
  4. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
  5. 微信小程序界面设计小程序中的WXSS(css)选择器课程-派生选择器
  6. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
  7. 微信小程序界面设计小程序中的WXSS(css)选择器课程-选择器的分组
  8. HTML基础-简介
  9. ASP实战之HTML入门-黄菊华-专题视频课程
  10. 微信小程序WxParse解析富文本(html)代码在线视频教程
  11. HTML语言基础.上
  12. HTML语言基础.下
  13. HTML!
  14. 【网页前端设计Front end】HTML语言基础.上(看不懂你来打我)
  15. 【网页前端设计Front end】HTML语言基础.下(看不懂你来打我)
  16. 【django轻量级框架】HTML上传文件拦截到本地
  17. HTML5基础知识实战演练教程-黄菊华-专题视频课程
  18. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(1)商城首页
  19. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(2)商城分类
  20. 微信小程序框架weui的基础使用
  21. 一文入魂!彻底巩固你的Nginx知识体系!
  22. Nginx是什么?有哪些核心技术?
  23. Nginx配置如何一键生成
  24. 就这一次把网路的几种IO模型以及Nginx基本原理彻底搞清楚
  25. 优质高效,阿里性能怪兽宝典(Redis+Nginx)限时开源,手慢无!
  26. Nginx的配置文件nginx.conf配置解释
  27. 安装的nginx 地址重写
  28. nginx防盗链
  29. nginx动静分离
  30. nginx优化
  31. Nginx虚拟主机
  32. Nginx 反向代理
  33. IDEA实现热部署前端界面(Tomcat、IDEA)
  34. JavaScript中call与apply的区别
  35. JavaScript代码无分号问题
  36. 在Chrome浏览器中禁用JavaScript
  37. JavaScript为内置对象添加原型方法
  38. JavaScript原型数据共享与方法共享探究
  39. JavaScript把局部变量变成全局变量
  40. JavaScript函数自调用
  41. JavaScript继承的几种方法
  42. 逆向递归看JavaScript原型
  43. JavaScript函数进阶
  44. JavaScript中的call、apply、bind
  45. JavaScript高阶函数——函数当参数、返回值、其他成员
  46. JavaScript沙箱模式
  47. JavaScript闭包——点赞小案例
  48. JavaScript函数闭包
  49. JavaScript正则验证密码强弱度
  50. JavaScript表单信息验证案例——使用正则
  51. JavaScript伪数组和数组
  52. CSS代码书写规范
  53. jQuery——jQuery基本概念
  54. jQuery——jQuery选择器 ※
  55. jQuery——jQuery的CSS,class,属性操作及案例应用
  56. jQuery动画代码详解
  57. jQuery节点操作、弹幕案例
  58. jQuery事件机制
  59. jQuery链式编程,each方法,多库共存
  60. New open source project in July: can you keep up with the speed of building wheels at the front end?