web3d练习

qalx9

已于 2022-11-30 09:47:48 修改

阅读量99

点赞数

文章标签： css html 前端

于 2022-11-30 09:47:42 首次发布

本文链接：https://blog.csdn.net/qalx9/article/details/128109619

版权

要求

使用6张图片，组成一个3d的立方体，使得在页面上进行转动显示出来。并且，当鼠标放在这个立方体上面，这6张图片就直接炸开。

代码

主要用到transfrom进行位移和旋转。使用transform-style:preserve-3d，开启使用3d效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>day6</title>
	<style type="text/css">
		body{
			perspective: 800px;  /*视距*/
		}
			 @keyframes myAnimation {
	 from{
	 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	 }
	 to{
	 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	 }
	 }
			.conteainer{
				position: relative;
				width: 200px;
				height: 200px;
				margin: 300px auto;
				transform-style:preserve-3d;
				/*transform: rotateX(30deg);*/
				transform: rotateY(30deg);
				border: 1px solid red;
				animation: myAnimation 10s infinite linear;
			}
			.conteainer > img{
				width: 200px;
				height: 200px;
				position: absolute;
			}
			.conteainer>img:nth-child(1)
			{
				
			}
			.conteainer:hover > img:nth-child(1)
			{
				transform: translateZ(-200px);
			}
			.conteainer:hover > img:nth-child(2)
			{
				transform: translateX(-200px) rotateY(90deg);
			}
			.conteainer>img:nth-child(2)
			{
				left: -200px;
				transform: rotateY(90deg);
				transform-origin: right;
			}
			.conteainer:hover > img:nth-child(3)
			{
				transform: translateX(200px) rotateY(-90deg);
			}
			.conteainer>img:nth-child(3)
			{
				right: -200px;
				transform-origin: left;
				transform: rotateY(-90deg);
			}
			.conteainer:hover > img:nth-child(4)
			{
				transform: translateY(-200px) rotateX(-90deg);
			}
			.conteainer>img:nth-child(4)
			{
				top:-200px;
				transform-origin: bottom;
				transform: rotateX(-90deg);
			}
			.conteainer:hover > img:nth-child(5)
			{
				transform: translateY(200px) rotateX(90deg);
			}
			.conteainer>img:nth-child(5)
			{
				bottom: -200px;
				transform-origin: top;
				transform: rotateX(90deg);
			}
			
			.conteainer>img:nth-child(6)
			{
				transform: translateZ(200px);
			}
			.conteainer:hover > img:nth-child(6)
			{
				transform: translateZ(400px) ;
			}
	</style>
</head>
<body>
	<div class="conteainer">
	<img src="./img/3.jpg" alt="">
	<img src="./img/3.jpg" alt="">
	<img src="./img/3.jpg" alt="">
	<img src="./img/3.jpg" alt="">
	<img src="./img/3.jpg" alt="">
	<img src="./img/3.jpg" alt="">
	</div>
</body>
</html>

效果图显示

在这里插入图片描述
当鼠标移上去后：

qalx9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
web3d练习

使用6张图片，组成一个3d的立方体，使得在页面上进行转动显示出来。并且，当鼠标放在这个立方体上面，这6张图片就直接炸开。主要用到transfrom进行位移和旋转。使用transform-style:preserve-3d，开启使用3d效果。效果图显示当鼠标移上去后：
复制链接

扫一扫