css2D-3D实现的效果--小技巧 

2D变形：
    1）平移
    transform: translate(x,y);  元素从当前位置移动到给定的x轴和y轴的坐标位置
    transform: translateX(x); 沿着x轴的方向移动
    transform: translateY(y); 沿着y轴的方向移动
    注意：水平向右值为正，垂直向下值为正值
    transform: translate(50px);沿着x轴方向移动
    2）旋转
    transform: rotate(ndeg); 
    角度为正值，元素沿着顺时针方向旋转n度；角度为负值，沿着逆时针方向旋转
    3）缩放
    transform: scale(x,y); 元素沿着x轴和y轴做缩放
    transform: scaleX(x); 沿着x轴方向缩放
    transform: scaleY(y); 沿着y轴方向缩放
    x和y的取值：0-1缩小，1表示正常大小，1以上表示放大，负值时，先翻转后缩放
    transform: scale(0.5); x轴和y轴等比例缩放
    4）倾斜
    transform: skew(x,y); 元素沿着水平方向和垂直方向倾斜，单位deg
    transform: skewX(x); 沿着x轴方向倾斜
    transform: skewY(y); 沿着y轴方向倾斜
    transform: skew(30deg);沿着x轴方向倾斜
    注意：transform: rotate(360deg) scale(3);元素既要旋转又要缩放
transform-origin属性：元素基点位置的调整，必须与transform属性配合使用
3D变形必备属性：
    1）transform-style属性：
        transform-style: preserve-3d; 创建3D空间
    2）perspective属性：透视属性，近大远小，单位像素
    注意：以上两个属性均需要写在父元素中
    3D空间的轴线：x轴（右为正）、y轴（下为正）、z轴（向外为正）
3D变形效果：
    1）平移
    transform: translateZ(z); 沿着z轴平移
    transform: translate3d(x,y,z); 沿着x轴、y轴、z轴移动
    2）旋转
    transform: rotateX(xdeg); 沿着x轴方向旋转
    transform: rotateY(ydeg); 沿着y轴方向旋转
    transform: rotateZ(zdeg); 沿着z轴方向旋转
transform: rotate3d(x,y,z,angle); 沿着x轴、y轴、z轴旋转
    3）缩放：
    transform: scaleZ(); 沿着z轴缩放
    transform: scale3d(x,y,z); 沿着x轴、y轴、z轴缩放
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			img{
				vertical-align: middle;
			}
			.wrap{
				width: 1200px;
				margin: 20px auto;
			}
			.wrap div{
				float: left;
				border: 2px solid #000000;
				margin: 0 30px 30px 0;
				
				transform: preserve-3d;
				perspective: 500px;
			}
			.wrap div img{
				transition: all 2s;
			}
			.wrap div:nth-child(2):hover img{
				transform: translateZ(100px);
			}
			.wrap div:nth-child(3):hover img{
				transform: translateZ(-100px);
			}
			.wrap div:nth-child(4):hover img{
				transform: translateX(-100px);
				transform: translateY(100px);
			}
			.wrap div:nth-child(5):hover img{
				transform: translate3d(100px,0,0);
				transform: translate3d(0,100px,0);
				transform: translate3d(0,0,100px);
			}
			.wrap div:nth-child(6):hover img{
				transform: rotateX(30deg);
			}
			.wrap div:nth-child(7):hover img{
				transform: rotateX(-30deg);
			}
			
			.wrap div:nth-child(8) img{
				transform-origin: top;
				transform-origin: bottom;
			}
			.wrap div:nth-child(8):hover img{
				transform: rotateX(-30deg);
			}
			
			.wrap div:nth-child(9):hover img{
				transform: rotateY(30deg);
				transform: rotateY(-30deg);
			}
			.wrap div:nth-child(10):hover img{
				transform: rotateZ(30deg);
			}
			.wrap div:nth-child(11):hover img{
				transform: rotate3d(1,0,0,45deg);
				transform: rotateX(45deg);
			}
			.wrap div:nth-child(12):hover img{
				transform: rotate3d(0,1,0,45deg);
				transform: rotateY(45deg);
			}
			.wrap div:nth-child(13):hover img{
				transform: rotate3d(0,0,1,45deg);
				transform: rotateY(45deg);
			}
			.wrap div:nth-child(14):hover img{
				transform: rotate3d(1,1,0,45deg);
				transform: rotate3d(1,1,1,45deg);
			}
			
			/* z轴方向发生变化,变厚了 */
			.wrap div:nth-child(15):hover img{
				transform: scaleZ(2);
			}
			.wrap div:nth-child(16):hover img{
				transform: scale3d(1.5,0.5,2);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
			<div><img src="images/pic02.jpg" ></div>
		</div>
	</body>
</html>

 

posted @ 2020-03-03 17:11  JackieDYH  阅读(6)  评论(0)  编辑  收藏  举报  来源