有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制，而当中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS3的一些变换就可以实现更好的展示效果，简洁而有用。书本的3D模型是全部商品中最为简单的。由于其本质上就是一个立方体（cube）。仅仅是带有封面/封底和左側封条。所以 ...
分类：
Web程序 时间：
2018-01-14 13:48:21
阅读次数：
220
水平垂直居中的布局解决方案有很多，本文仅仅列出三种。 在浏览器里的显示效果： 第一种：利用flex来布局，也是最常用的方式： 第二种：绝对定位加CSS3的2D转换的方式。 第三种：绝对定位并使四个方向上均为0加margin：auto；具体代码如下： 以上三种方案的HTML部分： ...
分类：
Web程序 时间：
2018-01-13 12:56:29
阅读次数：
222
CSS3transform属性详解 transform字面上就是变形，改变的意思。 在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 2D Transform 方法 matrix() 和2D变换方法合并成 ...
分类：
Web程序 时间：
2018-01-11 01:11:08
阅读次数：
2373
在介绍有关transform相关的知识之前，先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位。另外，在使用时，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。 transform-origin 设置对象变换的原点，通常和ro ...
分类：
Web程序 时间：
2018-01-02 19:52:44
阅读次数：
16965
transition、animation和transform是CSS3中三个制作动画的重要属性，本篇文章主要对其进行学习了解。 一、transition transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画 ...
分类：
Web程序 时间：
2018-01-02 11:29:45
阅读次数：
499
头：header 内容：content/containe 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main ...
分类：
Web程序 时间：
2018-01-01 16:53:41
阅读次数：
220
Flexbox，是一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。 ...
分类：
其他好文 时间：
2017-12-27 11:59:12
阅读次数：
111
怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY（）属性，给需要动画的元素添加上一个动画class。 先上效果图： 1.蒙层的结构： 注意：三元运算符里的slideup和slidedown一定要加上引号 2.蒙层的其 ...
分类：
微信 时间：
2017-12-26 14:36:19
阅读次数：
978
box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-sizing是CSS3的B ...
分类：
其他好文 时间：
2017-12-25 00:44:50
阅读次数：
200
ext-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} ...
分类：
Web程序 时间：
2017-12-22 21:47:29
阅读次数：
272
