CSS3 3D位移translate效果实例介绍

2023-06-01 19:49:21 互联网

夏夜，天上缀满了闪闪发光的星星，像细碎的流沙铺成的银河斜躺在青色的天宇上。大地已经沉睡了。我任了性，纵容思念开成一片海，定格成回忆里抹不去的风景。太阳把大海映红了，好像得大海披上了一层红纱。

本文实例为大家分享了CSS3 3D 位移translate效果实例，供大家参考，具体内容如下

效果图：

示例代码：

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>3D位移的Demo</title>
<style>
#experiment{
-webkit-perspective:800;
-webkit-perspective-origin:50%50%;
-webkit-transform-style:-webkit-preserve-3d;
}
#block{
width:200px;
height:200px;
background-color:pink;
margin:100pxauto;
transition:background-color1s;
-webkit-transition:background-color1s;
}
#block:hover{
background-color:purple;
}
#op{
text-align:center;
}
#opinput{
width:800px;
}
</style>
<script>
functiontranslateall(){
varx=document.getElementById("translateX").value;
vary=document.getElementById("translateY").value;
varz=document.getElementById("translateZ").value;
document.getElementById("block").style.webkitTransform="translate3d("+x+"px,"+y+"px,"+z+"px)";
document.getElementById("translatex-span").innerText=x;
document.getElementById("translatey-span").innerText=y;
document.getElementById("translatez-span").innerText=z;
}
</script>
</head>
<body>
<divid="experiment">
<divid="block">
</div>
</div>
<divid="op">
<p>translatex:<spanid="translatex-span">0</span>px</p>
<inputtype="range"min="-360"max="360"id="translateX"value="0"class="range-control"onmousemove="translateall()"/><br/>
<p>translatey:<spanid="translatey-span">0</span>px</p>
<inputtype="range"min="-360"max="360"id="translateY"value="0"class="range-control"onmousemove="translateall()"/><br/>
<p>translatez:<spanid="translatez-span">0</span>px</p>
<inputtype="range"min="-360"max="360"id="translateZ"value="0"class="range-control"onmousemove="translateall()"/><br/>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

全站频道