您的位置：首页 > Web前端 > HTML

手机横屏小游戏，如何让一个div横屏并铺满屏幕

2017-08-15 15:42 363 查看

如何让一个div横屏并铺满屏幕

适合于各种手机横屏小游戏及其他需要。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

<title>test2</title>

<style>

.main{

position:absolute;

top:0;

left:100%;

transform:rotate(90deg);

background-color:red;

transform-origin:0 0 0;

}

</style>

<script src="js/jquery.js"></script>

</head>

<body class="webpBack">

<div class="main">

aaaaaaaaa

</div>

</body>

<script>

$(function() {

$('.main').css('height',$(window).width());

$('.main').css('width',$(window).height());

})

</script>

</html>

效果图片如下：

这样就实现啦，啦啦啦，啦啦啦，啦啦啦啦啦！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 横屏游戏 div旋转90铺满屏幕

相关文章推荐

新的分享

章节导航