代码如下：
<!DOCTYPE html>
<html>
<head>
<title>CSS3旋转图片</title>
<style>
demo {
width: 100px
height: 75px
background-color: yellow
border: 1px solid black
margin:20px
}
#div2 {
transform: rotate(30deg)
-ms-transform: rotate(30deg)/* IE 9 */
-moz-transform: rotate(30deg)/* Firefox */
-webkit-transform: rotate(30deg)/* Safari and Chrome */
-o-transform: rotate(30deg)/* Opera */
}
#div3 {
transform: rotate(90deg)
ms-transform: rotate(90deg)/* IE 9 */
moz-transform: rotate(90deg)/* Firefox */
webkit-transform: rotate(90deg)/* Safari and Chrome */
o-transform: rotate(90deg)/* Opera */
}
</style>
</head>
<body>
<div class="demo" id="div1">你好。这是一个 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div2">你好。这是一个 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div3">你好。这是一个 div 元素。</div>
原图<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style="width:200px">
90°旋转后的图片
<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style='width:200pxtransform:rotate(90deg)'>
</body>
</html>
代码呈现的结果如下图：
扩展资料
CSS图片旋转注意事项
1、图片的旋转可以说是一种效果，但是逐渐的，旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。我们都知道，照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。
2、这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。但是，现在直接就可以在web上对图片进行旋转之类的处理，就算图片处理软件再怎么方便好用，也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。我们可以在新浪微博上见到这种图片旋转的功能。
今天小编要跟大家分享的文章是关于转行Web前端工程师需要学习什么?Web前端开发技术人才越来越吃香，而且Web前端领域划分越来越细，对技术的需求越来越高，想学习Web前端的人也是越来越多。那么，如何学习Web前端知识?从哪开始?转型成为Web前端工程师需要学些什么?下面来和小编一起看一看吧！一、转型Web前端需要学什么
第一阶段：你要从最基础的HTML/CSS开始，简单地说，HTML就是一堆非常简单的标签，而CSS则是把你画画的流程用英语按一定的格式写出来。然后你需要理解常用HTML标签的意思，学会各种CSS的属性，还有CSS的盒模型、优先级、选择器
第二阶段：Java学习，你要是想在网页上实现交互效果，比如轮播图、点击按钮后播放动画等等，那么就必须学会Java。Java是一门完整、强大、热门的编程语言，浏览器的各种交互效果都由它来做到的。你先要了解一些基础的Java概念(变量、函数、基本类型)后，然后学习jQuery(Java代码库的一种)，并且通过jQuery继续使用CSS的选择器。
二、转职成为Web前端
专精HTML/CSS的前端从业人员也就是前端重构。这里要提一下，有一个职业对于这块很有优势，那就是设计师。不管是UI设计师，还是平面设计师，在页面上如何写页面，也知道怎么做的更好，并且更加理解Web世界，做出更“系统化”的设计。关于CSS的知识，你需要理解文档流、浮动流等各种定位的方式与原理，理解CSS
的继承复用思想、理解浏览器的差异、兼容等。关于HTML的知识，你需要学习语义化、可访问性与结构的合理，以及“结构与样式的分离”等。
你会爱上CSS
3的酷炫属性，可以做出响应式网页设计，用transiton和animation做补间动画与关键帧动画，用transform做缩放、旋转、3D变换，还有圆角、渐变、阴影、弹性盒掌握了以上的这些，你完全可以利用你的设计功底和Web前端知识，做出微信的H5页面、一些有趣的网页，或者个人的网站。
三、如何提升前端技能
如果你还想做出更厉害的交互效果，越来越喜欢编程，建议你成为一个前端工程师/全栈式UI设计师。这时，你必须学会以软件工程师的角度思考。你需要踏踏实实学习编程语言，深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等一大堆编程概念，需要了解浏览器，学习DOM、BOM、CSSOM的API，甚至还有学习一些网络原理，包括域名、URL、DNS、HTTP请求
如果你还处于迷茫阶段或者是一个小白，那你不要着急着手开始学习，因为没有目的和方法的学习，只会走弯路。这时候，建议你先深入了解有关前端方面的所有资讯，包括前景、就业、行业发展、技术囊括、职业等等，这样才能有目的和方向的学习。
以上就是小编今天为大家分享的关于转行Web前端工程师需要学习什么的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利。
