我想旋转放置在Chrome中滚动条按钮中的图片。现在我有一个CSS这个内容:
- ::-webkit-scrollbar-button:vertical:decrement
- {
- background-image:url(images/arrowup.png) ;
- -webkit-transform:rotate(120deg);
- -moz-transform:rotate(120deg);
- background-repeat:no-repeat;
- background-position:center;
- background-color:#ECEEEF;
- border-color:#999;
- }
我希望旋转图像而不旋转其内容。
解决方法
很好做和回答这里 –
http://www.sitepoint.com/css3-transform-background-image/
http://www.sitepoint.com/css3-transform-background-image/
- #myelement:before
- {
- content: "";
- position: absolute;
- width: 200%;
- height: 200%;
- top: -50%;
- left: -50%;
- z-index: -1;
- background: url(background.png) 0 0 repeat;
- -webkit-transform: rotate(30deg);
- -moz-transform: rotate(30deg);
- -ms-transform: rotate(30deg);
- -o-transform: rotate(30deg);
- transform: rotate(30deg);
- }