transform: rotate3d(x, y, z, angle) ফাংশন দিয়ে এলিমেন্টকে ৩D স্পেসে একটি ভেক্টর (x, y, z) আround ঘুরানো যায়। এখানে x, y, z হলো ভেক্টরের দিকনির্দেশনা, এবং angle হলো ঘুরনের পরিমাণ (deg, rad, turn)।
উদাহরণ ১: ইমেজ ঘুরানো (1,1,1 অক্ষে 45deg)
<!DOCTYPE html>
<html>
<head>
<style>
.demo { transform: rotate3d(1, 1, 1, 45deg); }
.skew_img { transform-origin: left; transform: skew(-0.10turn, 30deg); }
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
উদাহরণ ২: টেক্সট ঘুরানো (1,2,0 অক্ষে 30deg)
<!DOCTYPE html>
<html>
<head>
<style>
.demo { transform: rotate3d(1, 2, 0, 30deg); color: red; font-family: sans-serif; font-size: 30px; }
.skew_img { transform-origin: left; transform: skew(-0.10turn, 30deg); }
</style>
</head>
<body>
<h1>Learn</h1>
<p class="demo">Learn Apache Spark</p>
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
নোট: ৩D ট্রান্সফরমের জন্য প্যারেন্টে transform-style: preserve-3d এবং perspective দিতে হয় সঠিক ৩D ইফেক্ট পেতে।
