<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
</style>
</head>
<body>
<div>Hello</div>
<br>
-----------
.rotate180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
---------
var orientation, img = new Image(); img.onload = function () { if (img.naturalWidth > img.naturalHeight) { orientation = 'landscape'; } else if (img.naturalWidth < img.naturalHeight) { orientation = 'portrait'; } else { orientation = 'even'; } } img.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/flower-300x259.jpg";
---------
- img {
- transform: rotate(90deg);
- }
-------------
#profile-picture {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
-----------------------
----------
.class { image-orientation: 90deg; }
==========
.rotate {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
margin-top: 88px;
}
==========
http://cdn.wenxuecity.com/upload/album/57/1a/83/73b554224746ideiEEs4.jpg
| <p> </p> | |
| <p style="text-align: center;">【】【】</p> | |
| <p style="text-align: center;"> </p> | |
| <p style="text-align: center;"> </p> | |
| <center> | |
| <style type="text/css">div { | |
| width: 800px; | |
| height: 330px; | |
| background-color: none; | |
| /* Rotate div */ | |
| -ms-transform: rotate(90deg); /* IE 9 */ | |
| -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ | |
| transform: rotate(90deg); | |
| } | |
| </style> | |
| <div><img src="http://cdn.wenxuecity.com/upload/album/57/1a/83/73b554224746ideiEEs4.jpg" /></div> | |
| </center> | |
| <p> </p> | |
| <center> </center> | |
| <center> </center> | |
| <center> </center> | |
