每日必备小项目 21.03.29

于 2021-03-29 23:28:43 发布
阅读量103 收藏
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengwy_1/article/details/115314333
版权

css3之旋转效果

效果如图：
在这里插入图片描述

HTML部分

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/index.css">
</head>
<style>
	body {
		background-color: #f44336;
	}

	.box:nth-child(1) div {
		background: #f44336 url(../images/1.png) no-repeat center;
	}
</style>

<body>
	<!-- 景深 -->
	<div id="content">
		<!-- 3d空间 -->
		<div class="wrap">
			<div class="box">
				<div>1</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>2</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>3</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>4</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>5</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>6</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>7</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>8</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>9</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>10</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>11</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>12</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>13</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>14</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>15</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>16</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>17</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>18</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>19</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>20</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>21</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>22</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>23</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>24</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>25</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>26</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>27</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="box">
				<div>28</div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>

	<script src="js/index.js"></script>
</body>
<html>

CSS样式部分


#content {
	perspective: 1000px;
	overflow: hidden;
}

.wrap {
	width: 1190px;
	margin: 500px auto;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	transform-style: preserve-3d;
}

.box {
	width: 150px;
	height: 150px;
	position: relative;
	margin: 12px auto;
	transform-style: preserve-3d;
	transition: 0.5s ;
}

.box div {
	width: 100%;
	height: 100%;
	border: 10px solid rgba(0, 0, 0, .1);
	position: absolute;
	
	box-sizing: border-box;
	font-size: 50px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	line-height: 130px;
	text-shadow: 0 3px 10px rgb(0, 0, 0);
	
}

.box div:nth-child(1){	/* 前面 */
	transform: translateZ(75px);
}
.box div:nth-child(2){	/* 前面 */
	transform: translateZ(-75px);
}
.box div:nth-child(3){	/* 前面 */
	transform:rotateY(90deg) translateZ(75px);
}
.box div:nth-child(4){	/* 前面 */
	transform:rotateY(-90deg) translateZ(75px);
}
.box div:nth-child(5){	/* 前面 */
	transform:rotateX(90deg) translateZ(75px);
}
.box div:nth-child(6){	/* 前面 */
	transform:rotateX(-90deg) translateZ(75px);
}

JS样式部分

var boxBg = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#564545', '#607d8b', '#405d6b', '#9e9e9e', '#70737d', '#389fa0', '#38a05e', '#b3c981', '#76a803', '#fecf43', '#e2785f']; //box背景色
var bodyBg = ['#F7E8ED', '#F2D9E6', '#ECC6DE', '#E0ECF5', '#DDF4DE', '#F0F1D5', '#EEDECD', '#B8E6B3', '#ABE3D8', '#E0E1F5', '#F7E8ED', '#F2D9E6', '#E0ECF5', '#DDF4DE', '#F0F1D5', '#EEDECD', '#B8E6B3', '#ABE3D8', '#DFD1F0', '#616161']; //body背景色

var style = document.createElement("style");
var box = document.querySelectorAll(".box");
var rot = ['rotateX(-180deg)', 'rotateY(-180deg)', 'rotateX(180deg)', 'rotateY(180deg)'];
var str = ''

var index = Math.floor((Math.random()*bodyBg.length));



for (var i = 0; i < boxBg.length; i++) {
    str += `.box:nth-child(${i+1}) div{
	background:${boxBg[(i)]} url(../images/${(i+1)}.png) no-repeat center; 
}`
}

style.innerHTML = str

document.head.append(style)

box.forEach(function (box) {
    box.onmouseenter = function (ev) {
        var dir = getdir(ev, this)
        document.body.style.background=bodyBg[Math.round(Math.random()*(bodyBg.length-1))]
        this.style.transform = 'translateZ(150px)' + rot[dir]
    }
    box.onmouseleave =function(ev){
        this.style.transform=''
    }
})
// 得到一个坐标的函数
function getdir(ev, box) {
    var l = box.getBoundingClientRect().left;
    var t = box.getBoundingClientRect().top;
    var w = box.offsetWidth;
    var h = box.offsetHeight;

    var x = ev.clientX - l - w/2;
    var y = ev.clientY- t - h/2;
    var deg = Math.atan2(y,x)/(Math.PI/180);
    var d = (Math.round((deg+180)/90)+3)%4;
    return d
}

var content =document.querySelector('#content')
content.onmousemove =function(ev){
  
    var x = (0.5 -ev.clientY/window.innerHeight) *15
    var y =(ev.clientX/window.innerWidth -0.5) * 15
   
    content.style.transform ='perspective(10000px) rotateX('+x+'deg) rotateY('+y+'deg)'
}

代码分析：
1、本项目是考察其CSS3景深效果的应用。即景深在父级进行绑定
2、JS应用Math.atan2方法，进行返回其每个方块的边到X轴的角度

缺点：
HTML部分代码冗余看起来不舒服，有兴趣的小伙伴可以进行优化评论哦

chengwy_1
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值