www.ctrt.net > Css3 图片3D翻转

Css3 图片3D翻转

图片旋转可以用CSS3中的动画效果来做,CSS3中,允许使用 3D 转换来对元素进行格式化。 示例代码如下: *{margin:0;padding:0;}/*简单可以自定义,参照上面*/body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, System...

/* css3 让一个图片不断翻转示例代码 */#gavinPlay{/* background:color url x y repeat 图片来自百度图片,按需要更换 */background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat;...

上面不是写的很清楚么 div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg);/* Safari 和 Chrome */-moz-transform: rotateY(130deg);/* Firefox */}

/*以谷歌浏览器为例,实现360度翻转,命名个方法run翻转,调用run,5s周期内实现翻转*/ { -webkit-animation: run 10s linear infinite;/*添加动画,动画周期为5s,无限循环*/ } @-webkit-keyframes run { 0% {/*动画初始状态时元素旋转角度*/ -...

body{ -webkit-transform-style: preserve-3d; //3D模式 perspective: 500; -webkit-perspective: 500; /* Safari 和 Chrome */ //这里设置perspective和3D模式; } #div { width:300px;height:500px;baxkground:#000; -webkit-transform:rotate...

css3新增的一个控制元素旋转属性的函数是rotate()[不要怀疑,它的确是一个隐形的函数,他的使用很类似与js中的函数]。 同之前所讲过的translate和scale,他也分为2D和3D的旋转,差别就是Z轴的旋转。 现在我们来看实例,代码如下: .demo { margi...

4个参数,前三个,对应x,y,z 轴,是标示你是否希望沿着该轴旋转,是为1,不是为0,最后一个标示旋转的角度。 AMR(Adaptive Multi-Rate和Adaptive Multi-Rate Wideband )接口卡将音频和MODEM的接口电路、模拟电路和解码器制作在上面。 AMR狙击枪/...

你还需要考录一下perspective,就是视角。还有就是Z轴的因素也要考虑到。最好是可以把代码贴出来看一下!

css3 现在每个浏览器支持的效果还不一样呢,可能是你的这个效果暂不支持吧,百度一下各浏览器对CSS3支持的情况就明白了。当然了,如果支持的话,各个浏览器的代码也可能是不同的,你或许在GOOGLE下要改变一下代码

translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。

网站地图

All rights reserved Powered by www.ctrt.net

copyright ©right 2010-2021。
www.ctrt.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com