2013年10月 Web 开发大版内专家分月排行榜第三
2015年2月 总版技术专家分月排行榜第二
2015年2月 Web 开发大版内专家分月排行榜第一2015年1月 Web 开发大版内专家分月排行榜第一2014年12月 Web 开发大版内专家分月排行榜第一2014年11月 Web 开发大版内专家分月排行榜第一2014年10月 Web 开发大版内专家分月排行榜第一
2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
2015年7月 Web 开发大版内专家分月排行榜第三
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
2015年7月 Web 开发大版内专家分月排行榜第三
2015年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。用CSS3让div立体3D的旋转_HTML5_柯乐义
您的位置：
用CSS3让div立体3D的旋转
点击这里查看效果：效果图：以下是代码：&!DOCTYPE html&&html&&head&&title&transform-style实现Div的3D旋转-柯乐义&/title&&style&*{font-size: 24color: #00ff00; padding:0; margin:0;}#container {
height: 300
width: 300
-webkit-perspective: 500;
margin-top: 200
margin-right:
margin-left:}#parent-keleyi-com {
margin: 10
width: 280
height: 280
background-color: #666;
opacity: 0.3;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 15}#parent-keleyi-com & div {
width: 280
height: 200
padding: 10
-webkit-box-sizing: border-}#parent-keleyi-com & :first-child {
background-color: #000;
-webkit-transform: translateZ(-100px) rotateY(45deg);}#parent-keleyi-com & :last-child {
background-color: #333;
-webkit-transform: translateZ(50px) rotateX(20deg);
-webkit-transform-origin: 50%}
/*执行Y轴旋转360度动画*/@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}}&/style&&/head&
&div&请使用支持CSS3的浏览器&a href=&/a/bjad/s89uo4t1.htm& target=&_blank&&原文&/a&&/div&
&div id=&container&&
&div id=&parent-keleyi-com&&
&div&&a href=&/&&柯乐义&/a&&/div&
&div&&a href=&/&&&/a&&/div&
&/div&&/body&&/html&
Copyright&在CSS3中图片3D翻转效果是这样做到的 - 推酷
在CSS3中图片3D翻转效果是这样做到的
今天，带来的是纯CSS3的效果--图片3D翻转。
请看效果：
这个效果主要还是运用了CSS3的transform变形属性，与上个效果不同的是，这次并不是动画，所以没有采用animation属性，而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换，并产生一个过渡效果。详情请看代码。
HTML结构：
&div id=&content&&
&div class=&list&&
&img src=&../Images/1.jpg&&
&div class=&text&&
这是小狗哦！！
&div class=&list&&
&img src=&../Images/2.jpg&&
<span style="color:#
&div class=&text&&
<span style="color:#
这是小狗哦！！
<span style="color:#
<span style="color:#
<span style="color:#
1 &style type=&text/css&&
*{margin:0px;padding:0px;}
width:500px;
margin:30px auto;
width:200px;
margin:25px;
<span style="color:#
float:left;
<span style="color:#
position:relative;
<span style="color:#
<span style="color:#
.list img{
<span style="color:#
width:200px;
<span style="color:#
height:200px;
<span style="color:#
transform:perspective(200px) rotateY(0deg);
<span style="color:#
opacity:1;
<span style="color:#
transition:transform 600ms ease,opacity 600ms ease;
<span style="color:#
-webkit-transition:transform 600ms ease,opacity 600ms ease;
<span style="color:#
<span style="color:#
<span style="color:#
height:200px;
<span style="color:#
width:200px;
<span style="color:#
line-height:200px;
<span style="color:#
background:#000;
<span style="color:#
color:#fff;
<span style="color:#
opacity:0;
<span style="color:#
position:absolute;
<span style="color:#
text-align:center;
<span style="color:#
font-weight:bold;
<span style="color:#
<span style="color:#
<span style="color:#
transform:perspective(200px) rotateY(-180deg);
<span style="color:#
transition:transform 600ms ease,opacity 600ms ease;
<span style="color:#
-webkit-transition:transform 600ms ease,opacity 600ms ease;
<span style="color:#
<span style="color:#
.list:hover img{
<span style="color:#
transform:perspective(200px) rotateY(180deg);
<span style="color:#
opacity:0;
<span style="color:#
transition:transform 600ms ease,opacity 600ms ease;
<span style="color:#
-webkit-transition:transform 600ms ease,opacity 600ms ease;
<span style="color:#
<span style="color:#
.list:hover .text{
<span style="color:#
transform:perspective(200px) rotateY(0deg);
<span style="color:#
opacity:1;
<span style="color:#
transition:transform 600ms ease,opacity 600ms ease;
<span style="color:#
-webkit-transition:transform 600ms ease,opacity 600ms ease;
<span style="color:#
<span style="color:#
代码很容易理解，先为图片设置一个初始旋转角度，因为它是先展示的，所以角度为180deg，透明度为1。当鼠标滑过时，改变角度和透明度，使其翻转。而背后的文字也是如此道理。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致