html3d正方体

2d特效

           transform:translateX(); x轴平移
           transform: translateY(); y轴平移
       transform:translateZ(); z轴平移

       transform:rotateX(); x轴旋转
       transform:rotateY(); y轴旋转
       transform:rotateZ(); z轴旋转


           transform: scaleX(); 缩放，括号内取值为0-1，超出则放大，可以为负
           transform: scaleY();

           transform: skewX(); x轴倾斜
           transform: skewX(); y轴倾斜
           transform: skewX(x，y); 缩写

transform-origin: left top; 以左上角为中心旋转，方向自定，也可以用数字表示原点
transform-origin: 0px 100px;

           transition-property: width,height,background-color........ ; 指定过渡属性
           transition-delay:1000ms; 延迟时间
           transition-duration: 3s; 动画持续时间
           transition：all 3s；简写

transform-style: preserve-3d; 添加3d效果的

z轴可以理解为深度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
			
        /*
			transform:translateX();         x轴平移
			transform: translateY();        y轴平移
		    transform:translateZ();         z轴平移


		    transform:rotateX();            x轴旋转
		    transform:rotateY();            y轴旋转
		    transform:rotateZ();            z轴旋转
		
			
			transition:all 3s;              过度元素，all选择所有的属性，3s动作持续3秒
		*/


		ul{
			list-style: none;
			margin: 150px auto;
			padding: 0px;
			width: 200px;
			height: 200px;
			position: relative;
			transform: rotateX(45deg) rotateY(45deg);/*以x，y轴旋转45度观测便于构造模型（旋转都是以顺时针，用谷歌浏览器调试，在脑海中建立空间图形）*/
			/*可以删除，删除后以平面展示*/
			transform-style: preserve-3d;/*给子元素添加3d效果，建3d模型必须要写的*/
		}
		ul li{
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0px;
		    left:0px;
		}
		ul li:nth-child(1){
			text-align: center;
			transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(100px);/*这个我写的有点多余了，是因为在网页中调试用的，可以删除没有用到的*/
			background-color: rgba(255,0,0,0.5);
		}
		ul li:nth-child(2){
			transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px)translateZ(-100px);
			background-color: rgba(0,255,0,0.5);
		}
		ul li:nth-child(3){
			transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(100px);
			background-color: rgba(255,0,255,0.5);
		}
		ul li:nth-child(4){
			transform: rotateX(90deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(-100px);
			background-color: rgba(255,255,0,0.5);
		}
		ul li:nth-child(5){
			transform: rotateX(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(100px);
			background-color: rgba(255,0,255,0.5);
		}
		ul li:nth-child(6){
			transform: rotateX(0deg) rotateY(0deg) translateX(0px) translateY(0px) translateZ(-100px);
			background-color: rgba(0,255,255,0.5);
		}
		ul:hover{
			transform: rotateX(360deg) rotateY(360deg);
			transition: all 5s;   /*过度元素*/
		}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li> 
	</ul>
</body>
</html>

扫描二维码关注公众号，回复： 12723929 查看本文章

猜你喜欢