简体   繁体   中英

Changing orientation of device without rotating contents

I am trying to make a mobile device and display some view inside using css. There is also a button to toggle the phone's orientation. I got the css for the device from http://jaredhardy.com/minimal-devices/ (iPhone). But when I try to change the orientation the content is also getting rotated.

The phone is rotated using transform: rotateZ(90deg) , so I tried to rotate contents in the opposite direction ( transform: rotateZ(270deg) ), but then content is not aligned inside the phone. I have tried reversing the height and width also, but then the phone is getting distorted.

截屏

Please check the fiddle I have created https://jsfiddle.net/ardvqeuw/1/ .

HTML


<div id="rotate-btn">
 Rotate Device
</div>
<div class="main">
<div id="mydevice" class="md-iphone-5 md-black-device">
   <div class="md-body">
      <div class="md-buttons"></div>
      <div class="md-front-camera"></div>
      <div class="md-top-speaker"></div>

      <div id="screen" class="md-screen">
          Some text here
        <img src="data:image/jpeg;base64,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" />
      </div>

      <button class="md-home-button"></button>
  </div>
</div>
</div>

CSS

#screen.md-landscape {
  transform: rotateZ(270deg);
}

.md-iphone-5.md-landscape {
  -webkit-transform: rotateZ(90deg);
  -moz-transform: rotateZ(90deg);
  -ms-transform: rotateZ(90deg);
  -o-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

JS

const btn = document.getElementById('rotate-btn');

btn.addEventListener('click', () => {
const mydevice = document.getElementById('mydevice');
const screen = document.getElementById('screen');
    if (mydevice.classList.contains('md-landscape')) {
    mydevice.classList.remove('md-landscape');
    screen.classList.remove('md-landscape');
  } else {
  mydevice.classList.add('md-landscape');
  screen.classList.add('md-landscape');
  }
});

I think the main problem here is that when you rotate the device and apply the rotation transform, you are applying it to the whole screen. It might be better to put all your content (what you want to display on the sreen) inside a container (div) and target that when applying the opposite rotation transform.

I took the liberty of modifying your jsfiddle a bit: https://jsfiddle.net/b2c9or0s/

 const btn = document.getElementById('rotate-btn'); const screen = document.getElementById('screen'); btn.addEventListener('click', () => { const mydevice = document.getElementById('mydevice'); const myContent = document.getElementById('my-content') if (mydevice.classList.contains('md-landscape')) { mydevice.classList.remove('md-landscape'); myContent.style.transform = 'rotate(0deg)' myContent.style.minWidth = '100%'; } else { mydevice.classList.add('md-landscape'); // myContent.style.minWidth = '177.5%'; // This depends on the device aspect ratio myContent.style.transform = 'rotate(-90deg)'; } });
 .main { display: table; margin: 0 auto; } #my-content { margin: 0 auto; }.md-iphone-5.md-body { width: 100%; height: 100%; border-radius: 3.75em; border-style: solid; border-width: 0.375em; position: relative; }.md-iphone-5.md-screen { position: relative; margin: 0 auto; background-color: white; border-radius: 0.25em; overflow: hidden; box-shadow: 0 0 0px 3px #161616; }.md-iphone-5.md-screen img { width: 100%; }.md-iphone-5.md-home-button { display: block; width: 3.625em; height: 3.625em; margin: 0 auto; position: relative; border-radius: 100%; border: none; cursor: default; font-size: 100%; }.md-iphone-5.md-home-button:after { content: ""; display: block; width: 1.125em; height: 1.125em; margin: 0 auto; position: relative; border-style: solid; border-width: 0.125em; border-radius: 0.25em; }.md-iphone-5.md-front-camera { width: 0.875em; height: 0.875em; margin: 0 auto; position: relative; border-radius: 100%; }.md-iphone-5.md-front-camera:after { content: ""; display: block; width: 0.375em; height: 0.375em; position: relative; top: 0.25em; left: 0.25em; background-color: #8c8091; border-radius: 100%; }.md-iphone-5.md-glare:before { content: ""; display: block; width: 50%; height: 83%; position: absolute; top: 0.625em; right: 0.625em; border-radius: 0 3.125em 0 0; z-index: 1; }.md-iphone-5:after { content: ""; display: block; width: 3.3125em; height: 0.1875em; position: absolute; right: 3.625em; top: -0.1875em; border-radius: 0.125em 0.125em 0 0; }.md-iphone-5 { width: 22.8125em; height: 49em; position: relative; }.md-iphone-5.md-front-camera { top: 1.25em; }.md-iphone-5.md-top-speaker { width: 3.75em; height: 0.875em; margin: 0 auto; position: relative; top: 2.25em; border-radius: 3.125em; }.md-iphone-5.md-top-speaker:after { content: ""; display: block; width: 3.25em; height: 0.375em; margin: 0 auto; position: relative; top: 0.25em; background-color: #4b414a; border-radius: 3.125em; }.md-iphone-5.md-screen { width: 20em; height: 35.5em; top: 3.75em; }.md-iphone-5.md-home-button { bottom: -5.9375em; }.md-iphone-5.md-buttons { width: 0.1875em; height: 1.875em; position: absolute; left: -0.5em; top: 5.9375em; border-radius: 0.125em 0 0 0.125em; }.md-iphone-5.md-buttons:after, .md-iphone-5.md-buttons:before { content: ""; display: block; position: absolute; width: 0.1875em; height: 1.5625em; border-radius: 0.125em 0 0 0.125em; }.md-iphone-5.md-buttons:after { top: 3.125em; }.md-iphone-5.md-buttons:before { top: 6.25em; }.md-iphone-5.md-glare:before { background: -webkit-linear-gradient(16deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08)); background: -moz-linear-gradient(16deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08)); background: -o-linear-gradient(16deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08)); background: linear-gradient(74deg, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08)); }.md-iphone-5.md-landscape { -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); }.md-iphone-5.md-landscape.md-glare:before { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); left: 0.625em; top: 0.625em; }.md-white-device.md-front-camera, .md-white-device.md-top-speaker, .md-white-device.md-home-button { background: -webkit-linear-gradient(#d0d0c5, #eeeeea); background: -moz-linear-gradient(#d0d0c5, #eeeeea); background: -o-linear-gradient(#d0d0c5, #eeeeea); background: linear-gradient(#d0d0c5, #eeeeea); }.md-black-device.md-front-camera, .md-black-device.md-top-speaker, .md-black-device.md-home-button { background: -webkit-linear-gradient(#141917, #202623); background: -moz-linear-gradient(#141917, #202623); background: -o-linear-gradient(#141917, #202623); background: linear-gradient(#141917, #202623); }.md-white-device.md-landscape.md-home-button, .md-white-device.md-landscape.md-front-camera, .md-white-device.md-landscape.md-top-speaker { background: -webkit-linear-gradient(left, #d0d0c5, #eeeeea); background: -moz-linear-gradient(left, #d0d0c5, #eeeeea); background: -o-linear-gradient(left, #d0d0c5, #eeeeea); background: linear-gradient(to right, #d0d0c5, #eeeeea); }.md-black-device.md-landscape.md-home-button, .md-black-device.md-landscape.md-front-camera, .md-black-device.md-landscape.md-top-speaker { background: -webkit-linear-gradient(left, #141917, #202623); background: -moz-linear-gradient(left, #141917, #202623); background: -o-linear-gradient(left, #141917, #202623); background: linear-gradient(to right, #141917, #202623); }.md-white-device.md-body { background-color: #ebebe4; border-color: #f1f2eb; }.md-white-device.md-buttons { background-color: #ebebe4; }.md-white-device.md-buttons:after, .md-white-device.md-buttons:before { background-color: #ebebe4; }.md-white-device.md-front-camera:after { background-color: #8c8091; }.md-white-device.md-top-speaker:after { background-color: #4b414a; }.md-white-device.md-home-button:after { border-color: #eff1e6; }.md-white-device:after { background: #ebebe4; }.md-black-device.md-body { background-color: #1b211e; border-color: #282e2b; }.md-black-device.md-buttons { background-color: #1b211e; }.md-black-device.md-buttons:after, .md-black-device.md-buttons:before { background-color: white; }.md-black-device.md-front-camera:after { background-color: #2c292f; }.md-black-device.md-top-speaker:after { background-color: #191616; }.md-black-device.md-home-button:after { border-color: #444a45; }.md-black-device:after { background: #1b211e; }
 <button id="rotate-btn"> Rotate Device </button> <div class="main"> <div id="mydevice" class="md-iphone-5 md-black-device"> <div class="md-body"> <div class="md-buttons"></div> <div class="md-front-camera"></div> <div class="md-top-speaker"></div> <div id="screen" class="md-screen screen-landscape"> <div id="my-content" class="my-content"> Some text here <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/cda08c55617997.598bcd54e5d8b.jpg" /> </div> </div> <button class="md-home-button"></button> </div> </div> </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM