Is it possible to flip a SwiftUI View vertically? - swiftui

Question

Looks like you can rotate a view upside down with UIView, but I can't find anything saying it's possible to do the same thing with a SwiftUI View.
Any help will be appreciated :)

Answer 1

Actually approach is the same to referenced post
Text("Test").font(.largeTitle)
.scaleEffect(CGSize(width: 1.0, height: -1.0)) // << here !!

Answer 2

Here is a convenience extension:
extension View {
func flipped(_ axis: Axis = .horizontal, anchor: UnitPoint = .center) -> some View {
switch axis {
case .horizontal:
return scaleEffect(CGSize(width: -1, height: 1), anchor: anchor)
case .vertical:
return scaleEffect(CGSize(width: 1, height: -1), anchor: anchor)
}
}
}
Use it:
Text("Flip me")
.flipped(.vertical)

Answer 3

Rotate Image As Mirror image by SwiftUI:
struct Rotate3DView: View {
#State var imagename: String = "exImage"
var body: some View {
VStack {
ZStack{
Image(imagename).resizable().opacity(0.3)
.rotation3DEffect(.degrees(180), axis: (x: -10, y: 0, z: 0))
.rotationEffect(.radians(.pi))
.padding(.top,60)
.cornerRadius(5)
.frame(width: 180, height: 280)
Image(imagename).resizable().padding(.bottom,45).frame(width: 180, height: 280)
}
}
}
}
This is very easy for native Users.

Answer 4

Turns out I can just apply this to the surrounding Stack:
.rotationEffect(.degrees(-180))
To flip it vertically

Answer 5

SwiftUI’s rotationEffect() modifier lets us rotate views freely, using either degrees or radians.
For example, if you wanted to rotate some text by -90 degrees so that it reads upwards, you would use this:
Text("Up we go")
.rotationEffect(.degrees(-90))
If you prefer using radians, just pass in .radians() as your parameter, like this:
Text("Up we go")
.rotationEffect(.radians(.pi))
View rotation is so fast that it’s effectively free, so you could even make it interactive using a slider if you wanted:
struct ContentView: View {
#State private var rotation = 0.0
var body: some View {
VStack {
Slider(value: $rotation, in: 0...360)
Text("Up we go")
.rotationEffect(.degrees(rotation))
}
}
}
enter link description here
By default views rotate around their center, but if you want to pin the rotation from a particular point you can add an extra parameter for that. For example if you wanted to make the slider above pivoting the rotation around the view’s top-left corner you’d write this:
struct ContentView: View {
#State private var rotation = 0.0
var body: some View {
VStack {
Slider(value: $rotation, in: 0...360)
Text("Up we go")
.rotationEffect(.degrees(rotation), anchor: .topLeading)
}
}
}
enter link description here