【HTML】【css3】3D变换

最新推荐文章于 2024-06-02 15:15:42 发布

清野zero

最新推荐文章于 2024-06-02 15:15:42 发布

阅读量87

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_50492082/article/details/115526399

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习笔记

3D变换——transform-style:preserve-3d;

//父容器
transform-style:preserve-3d;
transform-rotateX(x deg);  //X轴方向旋转
transform-rotateY(y deg);  //Y轴方向旋转
transform-rotateZ(z deg);  //Z轴方向旋转
//若不设置透视，则还是扁平的2D效果；
//放在舞台中
perspective:100px;  //透视距离，越近越小效果越好；

例子：

<html>
<head>
	<style>
		.box{
			width:100px;
			height:100px;
			float:left;
			transition:linear 1s;  //过渡方式 时间；
			transform-style:perserve-3d;  //过渡类型；
		}
		img{
			width:100px;
			height:75px;
		}
		.x:hover{
			transform:rotateX(60deg);
		}
		.y:hover{
			transform:rotateY(60deg);
		}
		.z:hover{
			transform:rotateZ(60deg);
		}
		#stage{
			width:200px;
			margin:100px auto;
			perspective:100px;
		}
	</style>
</head>
<body>
	<div id="stage">
		<div class="box x">     	 //引用box、x两个样式;
			<img src="xxx.jpg"/> 	//指定的图片路径;
		</div>
		<div class="box y">
			<img src="xxx.jpg"/>
		</div>
		<div class="box z">
			<img src="xxx.jpg"/>
		</div>
	</div>
</body>
</html>

清野zero

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】【css3】3D变换

学习笔记3D变换——transform-style:preserve-3d;//父容器transform-style:preserve-3d;transform-rotateX(x deg); //X轴方向旋转transform-rotateY(y deg); //Y轴方向旋转transform-rotateZ(z deg); //Z轴方向旋转//若不设置透视，则还是扁平的2D效果；//放在舞台中perspective:100px; //透视距离，越近越小效果越好；例子：&l
复制链接

扫一扫