本篇文章给大家带来的内容是关于纯CSS3实现3D翻转效果的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。作为前端开发人员的必修课，CSS3能带我们完成许多基本动效，本期我们将用CSS3实现hover翻转效果~第一步非常简单，我们简单画1个演示方块，为其添加transition和transform属性：1234567891011// 本示例均使用Sass语法.block { width: 200px; height: 200px; background: brown; cu
border-radius属性用于创建圆角，其使用语法是“border-radius: 1-4 length|%;”，border-radius是一个最多可指定四个“border -*- radius”属性的复合属性。本文操作环境：Windows7系统、Dell G3电脑、HTML5&&CSS3版。CSS3 border-radius属性作用：border-radius 属性用于创建圆角说明：border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性。基本语法
box-shadow是CSS3中的一个属性，是用于向方框添加一个或多个阴影，并设置阴影位置、尺寸、颜色等。CSS3 box-shadow属性作用：box-shadow 用于向方框添加阴影基本语法：1box-shadow: h-shadow v-shadow blur spread color inset;参数：h-shadow：水平阴影的位置。允许负值。 v-shadow ： 垂直阴影的位置。允许负值。 blur：模糊距离，可省略。spread：阴影的尺寸，可省略。color ：阴影的颜色，可省略
border-image属性是一个是一个简写属性，通过此属性可使用图片来创建边框，该属性的使用语法是“border-image: source slice width outset repeat|initial|inherit;”。本文操作环境：windows7系统、CSS3版、Dell G3电脑。border-image属性是一个是一个简写属性，通过该属性可使用图片来创建边框。CSS3 border-image属性作用：使用图片来创建边框说明：复合属性。设置或检索对象的边框样式使用图像来填充。可以一次性
background-size属性是用来设置背景图片尺寸大小的，可以通过长度值或百分比来设置图片大小，或者通过cover和contain来对图片进行伸缩设置。CSS background-size属性作用：规定背景图片的尺寸。说明：在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。语法：1background-size: length|percentage|cover|contain;值描述length 设置
background-origin属性是用于设置背景图片的定位区域，它有三个值分别表示相对于内边距框定位、相对于边框盒定位、相对于内容框定位。CSS3 background-origin属性作用：规定背景图片的定位区域。说明：设置或检索对象的背景图像计算 <' background-position '> 时的参考原点(位置)。语法：1background-origin: padding-b
text-shadow属性用于为文本添加阴影效果，通过该属性我们可以设置水平或垂直阴影的位置，模糊距离及颜色。CSS3 text-shadow属性作用：向文本应用阴影。说明：设置或检索对象中文本的文字是否有阴影及模糊效果。语法：1text-shadow: h-shadow v-shadow blur color;h-shadow：水平阴影的位置。允许负值。 v-shadow：垂直阴影的位置。允许负值。 blur：模糊的距离，可省略。 color ：阴影的颜色，可省略。 说明：text-
word-wrap属性用于将长单词或 URL 地址在容器的边界处进行自动换行。CSS3 word-wrap属性作用：允许长单词或 URL 地址换行到下一行。说明：设置或检索当内容超过指定容器的边界时是否断行。语法：1word-wrap: normal|break-word;normal：只在允许的断字点换行（浏览器保持默认处理）。break-word：在长单词或 URL 地址内部进行换行。CSS