21、前端开发：CSS知识总结—

1、属性定义

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。可以改变元素的形状或位置，不会影响到页面的布局。

2、语法

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

扩展：水平垂直居中（宽高位置的情况下）

position：absolute；

left：50%;

right：50%;

transform：translateX(-50%) translateY(-50%);

Z轴平移，调整元素在Z轴的位置，正常情况下就是调整元素和人眼之间的距离，距离越大，元素离人越近；Z轴平移属于立体效果（近大远小），默认网页不支持透视，如果需要，必须要设置网页的视距

/*网页视距的设置*/html{/*设置网页视距为800px，人眼距离网页的距离*/perspective：800px;}

旋转，通过旋转可以使元素沿着x，y，z轴旋转指定的角度

rotateX() 例：rotateX(1 turn) 沿X旋转一圈；

rotateY() 例：rotateY(180deg) 沿Y旋转180°；

rotateZ() 例：rotateZ(90deg) 沿Z旋转90°。

backface-visibility：hidden； //是否显示元素背面

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>DoubleYellow</title><style> body{margin:30px;background-color:#E9E9E9;}div.polaroid{width:294px;padding:10px 10px 20px 10px;border:1px solid #BFBFBF;background-color:white;/* Add box-shadow */box-shadow:2px 2px 3px #aaaaaa;}div.rotate_left{float:left;-ms-transform:rotate(7deg); /* IE 9 */-webkit-transform:rotate(7deg); /* Safari and Chrome */transform:rotate(7deg);}div.rotate_right{float:left;-ms-transform:rotate(-8deg); /* IE 9 */-webkit-transform:rotate(-8deg); /* Safari and Chrome */transform:rotate(-8deg);}</style></head><body><div class="polaroid rotate_left"><img src="pulpitrock.jpg" alt="" width="284" height="213"><p class="caption">The pulpit rock in Lysefjorden, Norway.</p></div><div class="polaroid rotate_right"><img src="cinqueterre.jpg" alt="" width="284" height="213"><p class="caption">Monterosso al Mare. One of the five villages in Cinque                 Terre.</p></div></body>
</html>

21、前端开发：CSS知识总结——transform变形属性相关推荐

前端开发核心知识进阶
课程内容开篇词:如何突破前端开发技术瓶颈日本后现代主义作家村上春树写过一本富有哲理的书--<当我谈跑步时我谈些什么>. 书中,他谈到,跑步跟写作一样:都需要坚毅隐忍,追逐超越:都需要心 ...
网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
CSS3 transform变形属性、2D变形、3D变形
第十五章:transform变形属性一.2D变形 1. rotate()旋转属性值 2. translate()位移属性值 3. scale()缩放属性值 4. skew()倾斜属性值 5. tra ...
三、前端开发-CSS
三.前端开发语言体系-CSS 文章目录三.前端开发语言体系-CSS CSS3 浏览器前缀流.元素与基本尺寸盒模型四大家族流的破坏与保护层叠规则文本处理元素显示与隐藏变形过渡动画 F ...
前端开发--CSS基础
快速生成css样式采用简写的方式即可 w200 tab键 width:200px:lh200 tab键line-height:200px:## web服务器免费的远程服务,免费空间 http://f ...
前端开发基础知识整理--web综合篇
该篇是web综合部分,主要包含了HTML(HTML5).http.页面优化及其他一些概念性的问题 doctype是什么?标准模式与兼容模式各有什么区别? <!doctype>声明必须处于H ...
web前端开发基础知识_前端开发是什么？学前端开发需要学什么语言？你想成为程序员吗？...
Web前端是什么前端的本质就是通过一定的程序代码来实现用户界面的ui 交互.可以认为用户在终端所看到的和所操作的都属于前端,也就是说分为渲染页面和处理用户操作两块. 前端开发是创建Web页面或app ...
前端开发基础知识汇总
一.HTML 1.前言与常用标签浏览器内核备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...

21、前端开发：CSS知识总结——transform变形属性

1、属性定义

2、语法

21、前端开发：CSS知识总结——transform变形属性相关推荐

最新文章

热门文章