-
时光荏苒3922519
- 各位大佬帮忙看看为啥
- 2020-06-07 2回答·851浏览
-
Sherlock_bourne
- 照着视频代码打的，为何我的显示在浏览器左侧
- 已采纳 IT种子选手 的回答
margin: 100px auto; 你的margin后面跟的是分号
- 2018-12-27 1回答·1267浏览
-
慕九州4739172
- 火狐上到底可不可以啊？
-webkit-perspective:800px;
-moz-perspective:800px;
perspective:800px;- 2016-11-25 2回答·1232浏览
-
大蚊子1023
- 为什么么效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D 特效</title>
<style type="text/css">
*{ margin:0; padding; }/*transition-property:background-color;transition-duration:1s;transition-timing-function:ease;*/
#block1{ width:400px; height:400px; background-color:#69c; margin:0 auto; transition: 2s; -webkit-transition: background-color 2s; -moz-transition:background-color 2s;}
#block1:hover{ background-color: #F00; }
#experiment{perspective:800px; perspective-origin:50% 50%; transform-style:preserve-3d;-webkit-perspective:800; -webkit-perspective-origin:50% 50%; -webkit-transform-style:preserve-3d;-moz-perspective:800; -moz-perspective-origin:50% 50%; -moz-transform-style:preserve-3d;}
#block{ width:500px; height: 500px; background-color:#3333FF; margin:100px auto;
transition: 2s}
#block:hover{transform:rotateX(45deg);-webkit-transform:rotateX(45deg);-moz-transform:rotateX(45deg);}
</style>
</head>
<body>
<div id="block1"></div>
<div id="experiment">
<div id="block">
</div>
</div>
</body>
</html>- 2016-10-25 2回答·992浏览
-
慕粉4167638
- 没有3D效果！
-webkit-perspective: 500;
-webkit-perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;需要设置，视点位置
- 2016-10-13 1回答·1409浏览
-
东方男孩3142619
- 你这代码写进去怎么没有效果
#d01{
margin:0 auto;
width: 500px;
height: 500px;
text-align: center;
font-weight: 900;
font-size: 100px;
-webkit-transform-style:preserve-3d;
-webkit-perspective:800px; /* Safari 和 Chrome */
-webkit-perspective-origin: 200% 50%; /* Safari 和 Chrome */
}
#d02{
background: navajowhite;
transform: rotateX(45deg);
/*transition: height 2s ease-in,background-color 2s ease-out, width 2s ease-in-out, font-size 2s ease, rotate 10s;*/
}
/*#d01:hover{
background: paleturquoise;
width: 1000px;
height: 700px;
font-size: 300px;
perspective: 800px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
transform: rotateX(90deg);
}*/
</style>
</head>
<body>
<div id="d01">
<div id="d02">
Tee
</div>
</div>
这样就行 必须在父层元素上做3D的设置 在子元素哪里进行位置偏转
w3c官方文档这样的3D设置只支持Chorme Safari
- 2016-04-11 2回答·1152浏览
-
一布工程师
- 前缀用-moz在火狐无法实现，但-webkit在google能实现3d
支持啊
- 2016-02-28 2回答·1299浏览
-
geminabcd
- 设置transform-style时后面的preserve-3d前面不应该再加-webkit吧，老师可把我坑惨了，我做后面的挑战题，做出来的正方体一动就成平面的了，找了好久才发现是这儿的问题
如果我在写这些加后缀的属性就会这么写，最后会放一行不加的。因为浏览器如果遇到不认识的属性会直接忽略。老师说的加可能是他在讲这个的时候，浏览器还不支持不加前缀的，但是现在更新就支持了。如果需要加前缀的话，不同的浏览器加的前缀也不一样。
-webkit-transform-style：-webkit-preserve-3d； transform-style：preserve-3d；
- 2015-11-25 6回答·6310浏览
-
qq_说不定永远很容易_0
- 360浏览器，不是立体效果
- 已采纳 李晓健 的回答
那看下你的浏览器是不是不支持css3 的3D 的特效。如果要用到css3的一些属性时，需要注意浏览器的支持，并非所有浏览器都支持最新的CSS3属性，有些浏览器只支持少数css3的属性。
- 2015-11-22 1回答·954浏览
-
艾晗
- 不显示效果
是不是 私有前缀没有加
- 2015-10-21 1回答·1065浏览
-
poetaster
- 怎么出不来？哪里出错了？
- 已采纳 echo_kinchao 的回答
写错字了
- 2015-10-15 2回答·1132浏览
-
慕数据5125493
- rotateX使用之后没有3D效果
出来了，自己拼写错误
- 2015-06-18 4回答·1174浏览
-
qq_T_T若是人间四月天_0
- 用的360为啥没有3D效果呢？
浏览器兼容的问题，目前貌似只有Chrome支持perspective属性
- 2015-05-08 1回答·1151浏览
-
orangecat
- div必须设置成两个吗
- 2015-03-28 4回答·1105浏览
-
bob_aren
- X,Y轴都没有见到变化。。。。。
跟浏览器内核有关，需要加上兼容性
- 2015-02-16 1回答·1069浏览
-
qwerty250
- 为什么在Firefox上没用
- 已采纳 superarm 的回答
firefox上将webkit改为moz
- 2015-01-14 3回答·1324浏览
-
LiuHaiBing
- 老师，我的没效果
你用的是什么浏览器，内核不同前缀不一样
- 2014-12-13 2回答·1140浏览
-
summerstarry
- 感谢老师
感谢老师
- 2014-12-12 1回答·820浏览
-
兔兔_跟上大神的脚步
- 新款浏览器兼容
- 2014-11-25 2回答·1037浏览
-
兔兔_跟上大神的脚步
- 英语发音
- 2014-11-25 2回答·810浏览
-
付君春
-
小茶kokier
-
我爱达芬奇
-
Crystal王白露
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title></head>
<style>
#expriment {
perspective:800px;
perspective-origin:50% 50%;
transform-style:preserve-3d;
}
#block {
width:500px;
height:500px;
margin:100px auto;
background-color: #0099ff;
transform: rotatey(45deg);
}
</style>
<body>
<div id="expriment">
<div id="block">
</div></body>
</html>
这样才行 perspective:800px; perspective:800不行，要加一个PX
- 2014-08-22 5回答·1305浏览
-
qfliu_farmer
-
Sannoiy
-
哎呦喂裸奔
-
L_新货
-
小梁爱小猫
-
正义的来福灵
