微信小程序样式旋转
相关文档: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文件
最终效果图:
微信小程序样式旋转的更多相关文章
- 微信小程序(7)--微信小程序连续旋转动画
微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...
- 微信小程序学习笔记(1)-微信小程序样式设置逻辑
1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...
- 微信小程序连续旋转动画this.animation.rotate
一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一 ...
- 微信小程序样式wxss各种问题总结(不断更新)
1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...
- 微信小程序 教程及示例
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...
- 微信小程序初使心得【微信小程序快速入门】
摘要: 2016年推出微信小程序,时至今日,历经几个版本的更新,已形成了相对实用和稳定的服务平台.本文简单的介绍了微信小程序的入门用法,今后会继续关注和实践. 2016年推出微信小程序,时至今日,历经 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
随机推荐
- nslookup get public/external IP
nslookup myip.opendns.com resolver1.opendns.com Server: resolver1.opendns.comAddress: 208.67.222.222 ...
- 【原创】Java基础之Session机制
Session机制 JSESSIONID是Session的标识,当客户端请求服务器端的时候,服务器端会检查是否已经给这个客户端创建过Session,也就是看客户端的请求中的header是否有Cooki ...
- RDay1-Problem 3 C
题目描述 初始给定n个卡片拍成一排,其中第i个卡片上的数为x[i]. 有q个询问,每次询问给定L和R表示询问区间[L,R]内的卡片所有出现了偶数次的数的异或和是多少. 输入 输入文件C.in 输入一行 ...
- Spring Boot Mybatis整合
Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 特 ...
- Eclipse安装git插件以及关联导入GitHub项目
一.Eclipse配置git 1.查看自己eclipse的版本 打开eclipse 导航: help->AboutEclipse 如图: 2.检查Eclipse中是否已安装Git插件 菜单栏He ...
- c++ ignore用法
转自 http://blog.sina.com.cn/s/blog_4b3336c50102v45n.html std::cin.ignore() can be called three diffe ...
- drop、truncate和delete的区别
TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 DELETE 速度快,且使用的系统和事务日志资源 ...
- matplotlib figure图像-【老鱼学matplotlib】
如果我们想要显示多个图像,有点类似多窗口显示图像这个概念,则就会用到plt.figure() 直接上例子: import numpy as np import pandas as pd import ...
- docker - 容器lxc
容器:是在用户空间进行隔离的组件叫做容器 常用的容器有lxc ----libcontainer---runc 需要隔离的资源有: Rootfs:每个容器对应的一个目录做为根目录 User: Hostn ...
- Stock Chase 拓扑
题意 给出n个公司 m条信息 当某条信息构成环了 则这条信息是错误的 统计有多少个信息是错误的 这题是一条一条读入 虽然分在拓扑排序类里面 但是不会用拓扑排序来做 可以用floyd思想来做 如果 ...