相关文档:http://www.w3school.com.cn/cssref/pr_transform.asp

index.wxss文件

注意:如果是web前端,要注意浏览器的兼容性


.x1{
width: 46rpx;//元素的宽
height: 40rpx;//元素的高
top: 82rpx;//元素距离顶部的距离
left:315rpx;//元素距离左边的距离
transform-origin:50% 50%;//设置元素旋转的基本点
position: absolute;
transform: rotate(30deg);//30是元素旋转的度数
}
.x2{
width: 46rpx;
height: 40rpx;
top: 130rpx;
left:365rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(60deg);
}
.x3{
width: 46rpx;
height: 40rpx;
top: 190rpx;
left:384rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(90deg);
}
.x4{
width: 46rpx;
height: 40rpx;
top: 259rpx;
left:365rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(120deg);
}
.x5{
width: 46rpx;
height: 40rpx;
top: 308rpx;
left:315rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(150deg);
}
.x6{
width: 46rpx;
height: 40rpx;
top: 321rpx;
left:256rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(180deg);
}
.x7{
width: 46rpx;
height: 40rpx;
top: 308rpx;
left:198rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(210deg);
}
.x8{
width: 46rpx;
height: 40rpx;
top: 259rpx;
left:147rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(240deg);
}
.x9{
width: 46rpx;
height: 40rpx;
top: 190rpx;
left:129rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(270deg);
}
.x10{
width: 46rpx;
height: 40rpx;
top: 130rpx;
left:147rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(300deg);
}
.x11{
width: 46rpx;
height: 40rpx;
top: 82rpx;
left:188rpx;
transform-origin:50% 50%;
position: absolute;
transform: rotate(330deg);
} .viewblockzzround{
position: absolute;
height: 245rpx;
width: 246rpx;
top: 120rpx;
left: 156rpx
}
.blockzzround{
width:100%;
height:100%;
}

index.wxml文件

<view class='viewblockzzround'>
<image src='https://api.longfengqi.net.cn/little/zzround.png' class='blockzzround'></image>
</view>
 
<image src='/image/src/redchair.png' class='x0' ></image>
 
<image src='/image/src/redchair.png' class='x1'></image>
 
<image src='/image/src/redchair.png' class='x2'></image>
 
<image src='/image/src/redchair.png' class='x3'></image>
 
<image src='/image/src/redchair.png' class='x4'></image>
 
<image src='/image/src/redchair.png' class='x5'></image>
 
<image src='/image/src/redchair.png' class='x6'></image>
 
<image src='/image/src/redchair.png' class='x7'></image>
 
<image src='/image/src/redchair.png' class='x8'></image>
 
<image src='/image/src/redchair.png' class='x9'></image>
 
<image src='/image/src/redchair.png' class='x10'></image>
 
<image src='/image/src/redchair.png' class='x11'></image>
 

最终效果图:

  

微信小程序样式旋转的更多相关文章

  1. 微信小程序(7)--微信小程序连续旋转动画

    微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...

  2. 微信小程序学习笔记(1)-微信小程序样式设置逻辑

    1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...

  3. 微信小程序连续旋转动画this.animation.rotate

    一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一 ...

  4. 微信小程序样式wxss各种问题总结(不断更新)

    1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...

  5. 微信小程序 教程及示例

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...

  6. 微信小程序初使心得【微信小程序快速入门】

    摘要: 2016年推出微信小程序,时至今日,历经几个版本的更新,已形成了相对实用和稳定的服务平台.本文简单的介绍了微信小程序的入门用法,今后会继续关注和实践. 2016年推出微信小程序,时至今日,历经 ...

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 原创:新手布局福音!微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  9. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

随机推荐

  1. nslookup get public/external IP

    nslookup myip.opendns.com resolver1.opendns.com Server: resolver1.opendns.comAddress: 208.67.222.222 ...

  2. 【原创】Java基础之Session机制

    Session机制 JSESSIONID是Session的标识,当客户端请求服务器端的时候,服务器端会检查是否已经给这个客户端创建过Session,也就是看客户端的请求中的header是否有Cooki ...

  3. RDay1-Problem 3 C

    题目描述 初始给定n个卡片拍成一排,其中第i个卡片上的数为x[i]. 有q个询问,每次询问给定L和R表示询问区间[L,R]内的卡片所有出现了偶数次的数的异或和是多少. 输入 输入文件C.in 输入一行 ...

  4. Spring Boot Mybatis整合

    Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 特 ...

  5. Eclipse安装git插件以及关联导入GitHub项目

    一.Eclipse配置git 1.查看自己eclipse的版本 打开eclipse 导航: help->AboutEclipse 如图: 2.检查Eclipse中是否已安装Git插件 菜单栏He ...

  6. c++ ignore用法

    转自  http://blog.sina.com.cn/s/blog_4b3336c50102v45n.html std::cin.ignore() can be called three diffe ...

  7. drop、truncate和delete的区别

    TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 DELETE 速度快,且使用的系统和事务日志资源 ...

  8. matplotlib figure图像-【老鱼学matplotlib】

    如果我们想要显示多个图像,有点类似多窗口显示图像这个概念,则就会用到plt.figure() 直接上例子: import numpy as np import pandas as pd import ...

  9. docker - 容器lxc

    容器:是在用户空间进行隔离的组件叫做容器 常用的容器有lxc ----libcontainer---runc 需要隔离的资源有: Rootfs:每个容器对应的一个目录做为根目录 User: Hostn ...

  10. Stock Chase 拓扑

    题意 给出n个公司  m条信息 当某条信息构成环了  则这条信息是错误的 统计有多少个信息是错误的 这题是一条一条读入  虽然分在拓扑排序类里面 但是不会用拓扑排序来做 可以用floyd思想来做 如果 ...