css3盒模型、过渡、转换介绍

CSS3中盒模型：

前面CSS中学到的盒子模型给padding、border会撑开盒子的大小，实际大小要通过计算才能得到，为了解决这个问题，CSS3推出了box-sizing属性来解决此问题，当box-sizing的属性值为border-box时，无论给多大padding、border都不会撑开盒子的大小，而是内减content的大小，当值为content-box时，此时是前面CSS2中的盒子模型。

 <style>div {width: 200px;height: 200px;background-color: lightblue;padding: 50px;border: 20px solid lightgreen;box-sizing:border-box;}</style><body><div>今年</div></body>

transition过渡：

过渡是指从一个状态逐渐过渡到另一个状态，注意：过渡属性是加在需要过渡的元素上面的，关于过渡的相关属性总结如下：

 <style>div {width: 200px;height: 200px;background-color: #999;transition: all 1s;}div:hover {background-color: #111;}</style><body><div></div></body>

transform转换：

CSS3中给我们提供了2d和3d两种转换。

transform2D转换：

指元素在二维空间进行旋转、缩放、移动、倾斜，转换前后不会影响其他元素的位置，对行内元素无用,其属性值：

其综合写法：transform：translate(x,y) rotate(45deg) scale(2);先旋转会改变坐标轴方向，一般位移在最后。

 <style>.box1 {width: 200px;height: 200px;background-color: #666;transform-origin:left top;transform: rotate(45deg);}.box2 {width: 200px;height: 200px;background-color: #333;transform: translate(100px,50%);}.box3 {width: 200px;height: 200px;background-color: #888;transform: scale(0.5,2);}.box4 {width: 200px;height: 200px;background-color: #888;transform: skew(45deg,88deg);}</style><body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body>

transform3D转换:

3d有近大远小、物体后面遮挡不可见的特点，属性依旧是transform，和透视搭配才有效果，其属性值：

perspective透视：

透视(视距)，在2D平面产生近大远小立体效果，透视写在被观察元素的父级盒子上，透视越大，成像越小，单位常用px。

transfrom-style 3D呈现：

控制子元素是否开启3d立体空间，默认值flat不开启，preserve-3d子元素开启3d立体空间，3d呈现写在被观察元素的父级盒子上

 <style>.box {margin: 0 auto;width: 100px;position: relative;perspective: 500px;/*透视（视距）*/transform-style: preserve-3d;/*3D呈现为子元素开启3d立体空间*/}.box1,.box2 {width: 100px;height: 100px;background: yellow;position: absolute;}.box2 {background-color: rgb(69, 25, 214);transform: rotate3d(1, 0, 0, 90deg);/*1表示需要旋转，0表示不需要旋转*/}.box1 {transform: rotate3d(0, 1, 0, 80deg) translate3d(-60px, 20px, 20px);}</style><body><div class="box"><div class="box1"></div><div class="box2"></div></div></body>

backface-visibility定义不面向屏幕时隐藏：

由transform翻转后的图形默认是可以看到的，只是方向会改变，当给翻转的元素添加backface-visibility：hidden后，翻转后的元素就会被隐藏不显示:

 <style>.box {position: relative;}.box img {position: absolute;top: 0;left: 0;transition: all 2s;}.box:hover img {transform: rotate3d(1, 1, 0, 180deg);}img:last-child {backface-visibility: hidden;/*此属性要添加在翻转的元素上面*/}</style><body><div class="box"><img src="data:images/1.jgp" width="200"><img src="data:images/2.jgp" width="220"></div> .</body>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

css3盒模型、过渡、转换介绍相关推荐

CSS3弹性盒模型布局模块介绍
来源:Robert's talk 原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-i ...
【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
CSS3盒模型box-sizing属性详解，布局更方便
使用方法: box-sizing: content-box; box-sizing: padding-box; box-sizing: border-box; 属性解析: 当设置为content-bo ...
css3盒模型：IE6混杂模式下的盒模型
IE6混杂模式下的盒模型本来是IE的特有的,后来大家发现,诶还行好用,所以在CSS3中加入了属性box-sizing,当属性值为border-box时,则按照混杂模式的原则创建盒子适用于场景 1.宽 ...
（21）css3盒模型box-sizing属性
CSS3 中可以通过 box-sizing 来指定盒模型,这样我们就可以设置如何计算一个元素的总宽度和总高度. 1.content-box标准盒模型 Standard 模式:标准模式中,盒子总体大小为 ...
CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
简要介绍css的盒模型,CSS盒模型的介绍
CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和IE模型: ...
css3盒子模型微课_css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...

css3盒模型、过渡、转换介绍

css3盒模型、过渡、转换介绍相关推荐

最新文章

热门文章