CSS样式如何设置图片立体效果

html-css010

CSS样式如何设置图片立体效果,第1张

能否说得详细一点,什么叫立体效果的背景图片? 非要通过css设置,就只能设置左边和顶边的边框为浅色模拟高光,右边和底边的边框为深色模拟阴影来做立体效果。如果要复杂一些的立体效果,你就必须通过图片来做了,使用绘图软件绘制一个立体效果的按钮,然后设为按钮背景即可

3D为立体,2D为平面。点线面体中的面就是2D,体就是3D。

3D给人真实、立体的感觉,渲染时消耗显存大,并且质量高时,对显存频率、核心频率等要求也不少,3D比2D的要求高很多。

2D是面,虽然感觉不真实,不立体,但是消耗的显存小,质量高也没多大的要求,需求电脑的性能和3D比那就低多了。

有些低端3D游戏因为纹理材质方面,看起来很简陋,但是也比2D消耗得多,因此,硬件不是很高端的情况下,3D并不能体现出真实的优势。

加入正方形宽高为100px,

ul li:nth-child(1){

background-color: red

transform: translate(-100px) rotateY(90deg)

}

ul li:nth-child(2){

background-color: blue

transform: translate(100px) rotateY(90deg)

}

ul li:nth-child(3){

background-color: orange

transform: translateZ(100px)

}

ul li:nth-child(4){

background-color: green

transform: translateZ(-100px)

}

ul li:nth-child(5){

background-color: black

transform: translateY(100px) rotateX(90deg)

}

ul li:nth-child(6){

background-color: chocolate

transform: translateY(-100px) rotateX(90deg)

}

空间想象力要好,最开始所有面都重合在一起,要一个个移到指定位置形成个立方体