IT入门 > 教程 >

CSS3 transform-style 属性

实例 让转换的子元素保留3D转换： div{ transform: rotateY(60deg); transform-style: preserve-3d; -webkit-transform: rotateY(60deg); /* Safari and Chrome */ -webkit-transform-style: preserve-3d; /* Safari and Chrome */} 尝试一下...

CSS3 perspective 属性

实例 设置从何处查看一个元素的角度： div{ perspective: 500px; -webkit-perspective: 500px; /* Safari and Chrome */} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟...

CSS3 perspective-origin 属性

实例 设置一个3D元素的基数位置： div{ perspective:150; perspective-origin: 10% 10%; -webkit-perspective:150; /* Safari and Chrome */ -webkit-perspective-origin: 10% 10%; /* Safari and Chrome */} 尝试一下 » 浏览器支持 表...

CSS3 backface-visibility 属性

实例 隐藏旋转 div 元素的背面：: div{ backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Chrome 、Safari */ -moz-backface-visibility:hidden; /* Firefox */ -ms-backface-visibility:hidden; /* Internet Explorer */} 尝...

CSS3 transition 属性

实例 将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 100px 到 300px： div{ width:100px; transition: width 2s; -webkit-transition: width 2s; /* Safari */}div:hover {width:300px;} 尝试一下 » 浏览器支持 表格...

CSS3 transition-property属性

实例 将鼠标悬停在一个div元素上，逐步改变表格的宽度： div { transition-property:width; -moz-transition-property: width; /* Firefox 4 */ -webkit-transition-property:width; /* Safari and Chrome */ -o-transition-property...

CSS3 transition-duration 属性

实例 最后5秒出现切换效果： transition-duration: 5s; -webkit-transition-duration: 5s; /* Safari */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或...

CSS3 transition-timing-function 属性

实例 过渡效果以同样的速度从开始到结束： transition-timing-function: linear; -webkit-transition-timing-function: linear; /* Safari and Chrome */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一...

CSS3 transition-delay 属性

实例 等待2秒前切换效果开始： transition-delay: 2s; -webkit-transition-delay: 2s; /* Safari */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或...

CSS3 @keyframes 规则

实例 使一个div元素逐渐移动200像素： @keyframes mymove{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {top:0px;}to {top:200px;}} 尝试一下 » 在此页底部有更多的例子。 浏览器...