怎样用css实现透视效果

html-css019

怎样用css实现透视效果,第1张

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>八桂金融</title>

</head>

<style type="text/css">

body {margin: 0overflow: hidden}

.box {height: 300px}

.num {height: 150pxwidth: 150pxbackground: rgba(255, 255, 255, 0.5)}/*仅仅background被渲染透明度50%*/

.box2 {height: 300px}

.num2 {height: 150pxwidth: 150pxbackground:#fffopacity: 0.5}/*div内容全部都被opacity渲染,透明度50%*/

</style>

<body>

</body>

<div class="box" style="background: url(

)">

<div class="num">

123

</div>

</div>

<br>

<div class="box2" style="background: url(

)">

<div class="num2">

123

</div>

</div>

</html>

指定对象围绕着 X / Y / Z 轴上的旋转角度

指定对象的 3D 旋转角度

前三个参数分别代表旋转的方向 x,y,z,第四个参数表示旋转的角度,参数不允许省略

前三个参数只有三个取值效果:正数,0,负数

如果多个方向发生改变,小数会代表在这个方向的旋转程度,最小小数取值为 0.1

指定对象 Z 轴的平移(更多用于遮罩)

z 值不能省略

指定对象的 3D 位移

第一个参数对应 X 轴,第二个对应 Y 轴,第三个对应 Z 轴,参数不允许省略

指定对象的 Z 轴缩放

参数对应 Z 轴,不允许省略

指定对象的 3D 缩放

参数不允许省略

指定观察者与 XOY 平面(也就是屏幕)的距离,使具有三维位置变换的元素产生透视效果

指定透视点的位置

x-axis:50%

y-axis:50%