是否可以倾斜,旋转,缩小3D文字？我想仅使用CSS在我的文本上创建底部视图效果(或者如果文本位于表格上).可能吗？我不是指动画,只是静态效果.我可以在3dsMAX或PhotoShop中完成,但我想知道如何在CSS中实现它.
我有：
我想要：
我得到了一点这种效果(由于阴影很大).但我想让它更清晰明确.阴影的进一步增加不会增强效果.我需要垂直倾斜和压缩我的文字.什么样的风格可以帮助我？
任何想法我都会感激不尽！
我的影子风格：
text-shadow: 0px 0px 0 rgb(221,120,128),-1px 1px 0 rgb(215,114,122),-2px 2px 0 rgb(209,108,116),-3px 3px 0 rgb(203,102,110),-4px 4px 0 rgb(197,96,104),-5px 5px 0 rgb(191,90,98),-6px 6px 0 rgb(185,84,92),-7px 7px 0 rgb(178,77,85),-8px 8px 0 rgb(172,71,79),-9px 9px 0 rgb(166,65,73),-10px 10px 0 rgb(160,59,67),-11px 11px 0 rgb(154,53,61),-12px 12px 0 rgb(148,47,55),-13px 13px 0 rgb(142,41,49),-14px 14px 0 rgb(136,35,43),-15px 15px 0 rgb(130,29,37),-16px 16px 15px rgba(0,0.6),-16px 16px 1px rgba(0,0.5),0px 0px 15px rgba(0,.2);
}
解决方法
这不容易我认为你需要js,不幸的是
css text-shadow属性只是2维.这是一个快速示例,使用键盘控制角度
0- REAL 3D仅使用CSS跨浏览器兼容性解决方案(prefixfree)
对于跨浏览器渐变(NO -webkit –,– moz –,– ms-)
使用LeaVerou/prefixfree节省您的时间
你可以找到一个CDN Version here
3D DEMO with prefixfree & CSS only
figure {
transform-origin:center center;
transform-style:preserve-3d;
transform: rotate3d(-1,-72deg);
}
1- REAL 3D使用JQUERY跨浏览器兼容性解决方案(prefixfree)
MARKUP
<figure></figure>
JS
var shadowLength = 40;
for(var i = 0;i < shadowLength; i++){
var layer = $("<h1>3D TEXT</h1>").css("transform","translateZ(-"+i+"px)");
$("figure").append(layer);
}
CSS
* { Box-sizing:border-Box; }
:root{
background-color: #00dbba;
overflow:hidden;
text-align:center;
}
figure {
transform-origin:center center;
transform-style:preserve-3d;
transform: rotate3d(-1,-72deg);
}
h1:first-child{
color:white;
}
h1 {
display:block;
width:100%;
padding:40px;
line-height:1.5;
font:900 8em 'Concert One',sans-serif;
text-transform:uppercase;
position:absolute;
color:#51B3A3;
}
你现在可以通过改变rotateZ(Value deg)rotateX(Value deg)rotateY(Value deg)的值来选择位置,以获得完美的位置.
figure {
transform-origin:center center;
transform-style:preserve-3d;
transform: rotateZ(0deg) rotateX(70deg) rotateY(-12deg);
}
深刻理解css3D
阅读how Nesting 3D Transformed Elements Works
不要错过[CSSconf.eu 2013] Ana-Maria Tudor: Maths-powered transforms for creating 3D shapes
如果您需要更多,请阅读
2- Ana-Maria Tudor on stackoverflow
2- REAL 3D
figure#figure3d {
-webkit-transform: rotateX(54deg) scale(1) skew(10deg) translate3d(0px,0px,0px);
-webkit-transform-origin:center center;
-webkit-transform-style:preserve-3d;
}
如果您不喜欢开头的动画,可以删除范围
span{
display:none;/*comment me to remove the animation*/
}
3-一般
或者像这样改变角度
-webkit-transform:rotate3d(-1,1,40deg);
#figure3d span {
color:silver;
-webkit-text-shadow: 0px 1px 0px #c0c0c0,0px 2px 0px #b0b0b0,0px 3px 0px #a0a0a0,0px 4px 0px #909090,0px 5px 10px rgba(0,0.6);
-moz-text-shadow: 0px 1px 0px #c0c0c0,0.6);
-ms-text-shadow: 0px 1px 0px #c0c0c0,0.6);
text-shadow: 0px 1px 0px #c0c0c0,0.6);
}
* { -webkit-Box-sizing:border-Box; }
figure#figure3d {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate3d(0px,0px);
-webkit-transform-origin:center center;
-webkit-transform-style:preserve-3d;
}
4-仅使用CSS
你可以使用text-shadow做的最大值就是这样的
#figure3d {
-webkit-transform: rotateX(65deg) scale(1) skew(10deg) translate3d(0px,0px);
-webkit-transform-origin: center center;
-webkit-transform-style: preserve-3d;
font-size:3.6em;
letter-spacing:10px;
font-family: 'Alfa Slab One',cursive;
font-weight:900;
color:white;
text-shadow: -1px 1px 0 #51B3A3,-2px 2px 0 #51B3A3,-2px 3px 0 #51B3A3,-2px 5px 0 #51B3A3,-2px 7px 0 #51B3A3,-2px 8px 0 #51B3A3,-2px 10px 0 #51B3A3,-2px 11px 0 #51B3A3,-3px 13px 0 #51B3A3,-3px 14px 0 #51B3A3,-3px 16px 0 #51B3A3,-3px 17px 0 #51B3A3,-4px 19px 0 #51B3A3,-4px 20px 0 #51B3A3,-4px 22px 0 #51B3A3,-4px 23px 0 #51B3A3,-4px 25px 0 #51B3A3,-4px 26px 0 #51B3A3,-5px 28px 0 #51B3A3,-5px 29px 0 #51B3A3;
}
你可以随意调整它！
